shadcn_phlexcomponents 0.1.0

data/lib/components/table_caption.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableCaption < Base
+    STYLES = "mt-4 text-sm text-muted-foreground".freeze
+
+    def view_template(&)
+      caption(**@attributes, &)
+    end
+  end
+end

data/lib/components/table_cell.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableCell < Base
+    STYLES = "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]".freeze
+
+    def view_template(&)
+      td(**@attributes, &)
+    end
+  end
+end

data/lib/components/table_footer.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableFooter < Base
+    STYLES = "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0".freeze
+
+    def view_template(&)
+      tfoot(**@attributes, &)
+    end
+  end
+end

data/lib/components/table_head.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableHead < Base
+    STYLES = <<~HEREDOC
+      h-10 px-2 text-left align-middle font-medium text-muted-foreground
+      [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]  
+    HEREDOC
+    
+    def view_template(&)
+      th(**@attributes, &)
+    end
+  end
+end

data/lib/components/table_header.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableHeader < Base
+    STYLES = "[&_tr]:border-b".freeze
+
+    def view_template(&)
+      thead(**@attributes, &)
+    end
+  end
+end

data/lib/components/table_row.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TableRow < Base
+    STYLES = "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted".freeze
+
+    def view_template(&)
+      tr(**@attributes, &)
+    end
+  end
+end

data/lib/components/tabs.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Tabs < Base
+    def initialize(value: nil, dir: "ltr", aria_id: "tabs-#{SecureRandom.hex(5)}", **attributes)
+      @dir = dir
+      @value = value
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        dir: @dir,
+        data: {
+          controller: "shadcn-phlexcomponents--tabs",
+          "shadcn-phlexcomponents--tabs-selected-value": @value
+        }
+      }
+    end
+
+    def list(**attributes, &)
+      TabsList(**attributes, &)
+    end
+
+    def trigger(**attributes, &)
+      TabsTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      TabsContent(aria_id: @aria_id, **attributes, &)
+    end
+  end
+end

data/lib/components/tabs_content.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TabsContent < Base
+    STYLES = <<~HEREDOC.freeze
+      mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2
+      focus-visible:ring-ring focus-visible:ring-offset-2 hidden
+    HEREDOC
+
+    def initialize(value: nil, aria_id: nil, **attributes)
+      @value = value
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content-#{@value}",
+        role: "tabpanel",
+        tabindex: "0",
+        aria: {
+          labelledby: "#{@aria_id}-trigger-#{@value}"
+        },
+        data: {
+          value: @value,
+          "shadcn-phlexcomponents--tabs-target": "content"
+        }
+      }
+    end
+  end
+end

data/lib/components/tabs_list.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TabsList < Base
+    STYLES = <<~HEREDOC.freeze
+      inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground outline-none
+    HEREDOC
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "tablist",
+        tabindex: "-1",
+        aria: {
+          orientation: "horizontal"
+        }
+      }
+    end
+  end
+end

data/lib/components/tabs_trigger.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TabsTrigger < Base
+    STYLES = <<~HEREDOC.freeze
+      inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm
+      font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2
+      focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
+      data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow
+      cursor-pointer
+    HEREDOC
+
+    def initialize(value: nil, aria_id: nil, **attributes)
+      @value = value
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-trigger-#{@value}",
+        role: "tab",
+        tabindex: "-1",
+        aria: {
+          controls: "#{@aria_id}-content-#{@value}",
+          selected: false,
+        },
+        data: {
+          "shadcn-phlexcomponents--tabs-target": "trigger",
+          value: @value,
+          state: "inactive",
+          action: <<~HEREDOC,
+            click->shadcn-phlexcomponents--tabs#setActiveTab
+            keydown.left->shadcn-phlexcomponents--tabs#setActiveToPrev:prevent
+            keydown.right->shadcn-phlexcomponents--tabs#setActiveToNext:prevent
+          HEREDOC
+        }
+      }
+    end
+  end
+end

data/lib/components/textarea.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Textarea < Base
+    STYLES = <<~HEREDOC
+      flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3
+      py-2 text-base shadow-sm 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(name: nil, id: nil, **attributes)
+      @name = name
+      @id = id || @name
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        name: @name,
+        id: @id,
+      }
+    end
+
+    def view_template(&)
+      textarea(**@attributes, &)
+    end
+  end
+end

data/lib/components/theme_switcher.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class ThemeSwitcher < Base
+    def view_template
+      Button(variant: :ghost, size: :icon, **@attributes)do
+        icon("sun", class: "hidden dark:inline")
+        icon("moon", class: "inline dark:hidden")
+      end
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--theme-switcher",
+          action: "shadcn-phlexcomponents--theme-switcher#toggle",
+        },
+      }
+    end
+  end
+end

data/lib/components/toast.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Toast < Base
+    STYLES = <<~HEREDOC
+      group pointer-events-auto relative flex w-full items-center justify-between
+      space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all
+      data-[state=open]:animate-in data-[state=closed]:animate-out 
+      data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full
+      data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full
+    HEREDOC
+
+    CLOSE_BUTTON_STYLES = <<~HEREDOC
+      absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity
+      hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100
+      group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400
+      group-[.destructive]:focus:ring-offset-red-600 cursor-pointer
+    HEREDOC
+
+    VARIANTS = {
+      default: "border bg-background text-foreground",
+      destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+    }.freeze
+
+    def initialize(variant: :default, duration: 5000, **attributes)
+      @variant = variant
+      @duration = duration
+      super(**attributes)
+    end
+
+    def title(**attributes, &)
+      ToastTitle(data: { title: ""}, **attributes, &)
+    end
+
+    def description(**attributes, &)
+      ToastDescription(data: { description: ""},**attributes, &)
+    end
+
+    def content(**attributes, &)
+      ToastContent(**attributes, &)
+    end
+
+    def action(**attributes, &)
+      ToastAction(variant: @variant, **attributes, &)
+    end
+
+    def action_to(name = nil, options = nil, html_options = nil, &block)
+      if block_given?
+        options ||= {}
+        options[:variant] = @variant
+      else
+        html_options ||= {}
+        html_options[:variant] = @variant
+      end
+      
+      ToastActionTo(name, options, html_options, &block)
+    end
+
+    def default_styles
+      "#{STYLES} #{VARIANTS[@variant]}"
+    end
+
+    def default_attributes
+      {
+        role: "status",
+        tabindex: 0,
+        aria: {
+          live: "off",
+          atomic: "true",
+        },
+        data: {
+          duration: @duration,
+          state: "open",
+          controller: "shadcn-phlexcomponents--toast",
+          action: <<~HEREDOC
+            focus->shadcn-phlexcomponents--toast#cancelDismiss
+            blur->shadcn-phlexcomponents--toast#dismiss
+            mouseover->shadcn-phlexcomponents--toast#cancelDismiss
+            mouseout->shadcn-phlexcomponents--toast#dismiss
+            keydown.esc->shadcn-phlexcomponents--toast#close
+          HEREDOC
+        }
+      }  
+    end
+
+    def view_template(&)
+      li(**@attributes) do
+        yield
+        button(type: "button", 
+              class: CLOSE_BUTTON_STYLES, 
+              data: { 
+                action: "shadcn-phlexcomponents--toast#close",
+              }) do
+          
+          icon("x", class: "size-4")
+        end
+      end
+    end
+  end
+end

data/lib/components/toast_action.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class ToastAction < Base
+    STYLES = <<~HEREDOC
+      inline-flex h-8 shrink-0 items-center justify-center rounded-md border
+      bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary
+      focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none
+      disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30
+      group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground
+      group-[.destructive]:focus:ring-destructive cursor-pointer
+    HEREDOC
+
+    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)
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = TAILWIND_MERGER.merge("#{STYLES} #{element_attributes[:class]}")
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        button(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/toast_action_to.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class ToastActionTo < ToastAction
+    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 ||= {}
+      @variant = @html_options.delete(:variant) || :default
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = TAILWIND_MERGER.merge("#{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/toast_container.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents  
+  class ToastContainer < Base
+    STYLES = <<~HEREDOC
+      fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4
+      sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]
+    HEREDOC
+
+    def default_attributes
+      {
+        tabindex: -1,
+        data: {
+          controller: "shadcn-phlexcomponents--toast-container",
+        }
+      }
+    end
+    
+    def view_template(&)
+      div(
+        role: "region",
+        tabindex: -1,
+        aria: {
+          label: "Notifications",
+        }
+      ) do
+        ol(**@attributes) do
+          template(data: { variant: "default" }) { toast(:default) }
+          template(data: { variant: "destructive" }) { toast(:destructive) }
+          yield
+        end
+      end
+    end
+
+    def toast(variant)
+      Toast(variant: variant) do |t|
+        t.content do
+          t.title { "" }
+          t.description { "" }
+        end
+      end
+    end
+  end
+end

data/lib/components/toast_content.rb

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

data/lib/components/toast_description.rb

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

data/lib/components/toast_title.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class ToastTitle < Base
+    STYLES = "text-sm font-semibold [&+div]:text-xs"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/tooltip.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Tooltip < Base
+    STYLES = "inline-block".freeze
+
+    def initialize(side: :top, aria_id: "tooltip-#{SecureRandom.hex(5)}", **attributes)
+      @side = side
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      render TooltipTrigger.new(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      render TooltipContent.new(side: @side, aria_id: @aria_id, **attributes, &)
+    end 
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--tooltip",
+          side: @side
+        }
+      }  
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/tooltip_content.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TooltipContent < Base
+    STYLES = <<~HEREDOC.freeze
+      z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground
+      animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+      data-[state=closed]:zoom-out-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: :top, 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--tooltip-target": "contentWrapper" }) do
+        div(**@attributes, &)
+
+        span(
+          id: "#{@aria_id}-content", 
+          role: "tooltip",
+          class: "sr-only",
+          &
+        )
+      end
+    end
+
+    def default_attributes
+      {
+        tabindex: -1,
+        data: {
+          side: @side,
+          "shadcn-phlexcomponents--tooltip-target": "content",
+          action: "mouseover->shadcn-phlexcomponents--tooltip#clearCloseTimer mouseout->shadcn-phlexcomponents--tooltip#closeWithDelay"
+        }
+      }
+    end
+  end
+end

data/lib/components/tooltip_trigger.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class TooltipTrigger < 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
+
+        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: {
+          describedby: "#{@aria_id}-content"
+        },
+        data: {
+          as_child: @as_child.to_s,
+          state: "closed",
+          action: <<~HEREDOC,
+            click->shadcn-phlexcomponents--tooltip#toggle
+            mouseover->shadcn-phlexcomponents--tooltip#openWithDelay
+            mouseout->shadcn-phlexcomponents--tooltip#closeWithDelay
+          HEREDOC
+          "shadcn-phlexcomponents--tooltip-target": "trigger"
+        }
+      }
+    end
+  end
+end

data/lib/install/install_shadcn_phlexcomponents.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+components_path = File.expand_path("../components", __dir__)
+components_install_path = Rails.root.join("vendor/shadcn_phlexcomponents")
+stimulus_controllers_path = File.expand_path("../../app/javascript/controllers", __dir__)
+stimulus_controllers_install_path = Rails.root.join("app/javascript/controllers/shadcn_phlexcomponents")
+tailwindcss_animate_path = File.expand_path("../../app/assets/tailwind/tailwindcss-animate.css", __dir__)
+tailwindcss_animate_install_path = Rails.root.join("app/assets/tailwind/shadcn_phlexcomponents/tailwindcss-animate.css")
+
+directory(components_path, components_install_path)
+directory(stimulus_controllers_path, stimulus_controllers_install_path)
+copy_file(tailwindcss_animate_path, tailwindcss_animate_install_path)