shadcn_phlexcomponents 0.1.0

data/app/javascript/controllers/theme_switcher_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  initialize() {
+    document.documentElement.classList.toggle(
+      'dark',
+      localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches),
+    )
+  }
+
+  toggle() {
+    if (document.documentElement.classList.contains('dark')) {
+      localStorage.theme = 'light'
+      document.documentElement.classList.remove('dark')
+    } else {
+      localStorage.theme = 'dark'
+      document.documentElement.classList.add('dark')
+    }
+  }
+
+  setLightMode() {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+  }
+
+  setDarkMode() {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+  }
+}

data/app/javascript/controllers/toast_container_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  add({ title, description, variant = 'default' }) {
+    const template =
+      variant === 'default'
+        ? this.element.querySelector('[data-variant="default"]')
+        : this.element.querySelector('[data-variant="destructive"]')
+
+    const clone = template.content.cloneNode(true)
+
+    if (title) {
+      clone.querySelector('[data-title]').textContent = title
+    }
+
+    if (description) {
+      clone.querySelector('[data-description]').textContent = description
+    }
+
+    this.element.append(clone)
+  }
+}

data/app/javascript/controllers/toast_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this.focusableElements = this.element.querySelectorAll('button')
+    this.duration = Number(this.element.dataset.duration)
+
+    this.focusableElements.forEach((el) => {
+      el.addEventListener('focus', () => {
+        this.cancelDismiss()
+      })
+      el.addEventListener('blur', () => {
+        this.dismiss()
+      })
+    })
+
+    this.dismiss()
+  }
+
+  cancelDismiss() {
+    window.clearTimeout(this.timer)
+  }
+
+  close() {
+    this.element.dataset.state = 'closed'
+
+    setTimeout(() => {
+      this.element.remove()
+    }, 100)
+  }
+
+  dismiss(event) {
+    if (event && event.type === 'mouseout') {
+      if (this.element.contains(document.activeElement)) {
+        return
+      }
+    }
+
+    if (this.duration > 0) {
+      this.timer = setTimeout(() => {
+        this.close()
+      }, this.duration)
+    }
+  }
+}

data/app/javascript/controllers/tooltip_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from '@hotwired/stimulus'
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from '@floating-ui/dom'
+
+export default class extends Controller {
+  static targets = ['trigger', 'contentWrapper', 'content']
+
+  connect() {
+    this.DOMClickListener = this.onDOMClick.bind(this)
+    this.DOMKeydownListener = this.onDOMKeydown.bind(this)
+
+    if (this.triggerTarget.dataset.asChild === 'false') {
+      this.triggerTarget.firstElementChild.addEventListener('focus', () => {
+        this.open()
+      })
+
+      this.triggerTarget.firstElementChild.addEventListener('blur', () => {
+        this.close()
+      })
+    } else {
+      this.triggerTarget.addEventListener('focus', () => {
+        this.open()
+      })
+
+      this.triggerTarget.addEventListener('blur', () => {
+        this.close()
+      })
+    }
+  }
+
+  toggle() {
+    if (this.isOpen()) {
+      this.close()
+    } else {
+      this.openWithDelay()
+    }
+  }
+
+  isOpen() {
+    return this.triggerTarget.dataset.state === 'open'
+  }
+
+  open() {
+    this.contentWrapperTarget.classList.remove('hidden')
+    this.triggerTarget.dataset.state = 'open'
+    this.contentTarget.dataset.state = 'open'
+    this.setupEventListeners()
+
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentWrapperTarget,
+      () => {
+        computePosition(this.triggerTarget, this.contentWrapperTarget, {
+          placement: this.element.dataset.side,
+          strategy: 'fixed',
+          middleware: [flip(), shift(), offset(4)],
+        }).then(({ x, y }) => {
+          Object.assign(this.contentWrapperTarget.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          })
+        })
+      },
+    )
+  }
+
+  close() {
+    if (!this.isOpen()) return
+
+    this.contentTarget.dataset.state = 'closed'
+    this.triggerTarget.dataset.state = 'closed'
+    this.cleanup()
+    this.cleanupEventListeners()
+
+    setTimeout(() => {
+      this.contentWrapperTarget.classList.add('hidden')
+    }, 100)
+  }
+
+  clearOpenTimer() {
+    window.clearTimeout(this.openTimer)
+  }
+
+  clearCloseTimer() {
+    window.clearTimeout(this.closeTimer)
+  }
+
+  openWithDelay() {
+    this.clearCloseTimer()
+
+    this.openTimer = setTimeout(() => {
+      this.open()
+    }, 300)
+  }
+
+  closeWithDelay() {
+    window.clearTimeout(this.openTimer)
+
+    this.closeTimer = setTimeout(() => {
+      this.close()
+    }, 150)
+  }
+
+  // Global listeners
+  onDOMClick(event) {
+    if (!this.isOpen()) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
+
+  onDOMKeydown(event) {
+    if (!this.isOpen()) return
+    const key = event.key
+
+    if (key === 'Escape') {
+      this.close()
+    }
+  }
+
+  setupEventListeners() {
+    document.addEventListener('click', this.DOMClickListener)
+    document.addEventListener('keydown', this.DOMKeydownListener)
+  }
+
+  cleanupEventListeners() {
+    document.removeEventListener('click', this.DOMClickListener)
+    document.removeEventListener('keydown', this.DOMKeydownListener)
+  }
+}

data/lib/components/accordion.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Accordion < Base
+    def initialize(value: nil, multiple: false, aria_id: "accordion-#{SecureRandom.hex(5)}", **attributes)
+      @multiple = multiple
+      @value = value && value.is_a?(String) ? [ value ] : value
+      @aria_id = aria_id
+      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: {
+          value: (@value || []).to_json,
+          multiple: @multiple.to_s,
+          controller: "shadcn-phlexcomponents--accordion"
+        }
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/accordion_content.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AccordionContent < Base
+    STYLES = "pb-4 pt-0"
+
+    def initialize(aria_id: :nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(class: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up
+                  data-[state=open]:animate-accordion-down hidden",
+          id: "#{@aria_id}-content",
+          role: "region",
+          aria: {
+            labelledby: "#{@aria_id}-trigger"
+          },
+          data: {
+            state: "closed",
+            "shadcn-phlexcomponents--accordion-target": "content"
+          }) do
+        div(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/accordion_item.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AccordionItem < Base
+    STYLES = "border-b"
+
+    def initialize(value:,  **attributes)
+      @value = value
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          state: "closed",
+          value: @value,
+          "shadcn-phlexcomponents--accordion-target": "item"
+        }
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/accordion_trigger.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AccordionTrigger < Base
+    STYLES = <<~HEREDOC
+      flex flex-1 items-center justify-between py-4 text-sm font-medium cursor-pointer
+      transition-all hover:underline text-left [&[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",
+          "shadcn-phlexcomponents--accordion-target": "trigger",
+          action: <<~HEREDOC
+            click->shadcn-phlexcomponents--accordion#toggleItem
+            keydown.up->shadcn-phlexcomponents--accordion#focusPrev:prevent
+            keydown.down->shadcn-phlexcomponents--accordion#focusNext:prevent
+          HEREDOC
+        }
+      }
+    end
+
+    def view_template(&)
+      h3(class: "flex") do
+        button(**@attributes) do
+          yield
+
+          icon("chevron-down", class: "size-4 shrink-0 text-muted-foreground transition-transform duration-200")
+        end
+      end
+    end
+  end
+end

data/lib/components/alert.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Alert < Base
+    STYLES = <<~HEREDOC
+      relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px]
+      [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7
+    HEREDOC
+
+    VARIANTS = {
+      default: "bg-background text-foreground",
+      destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    }.freeze
+
+    def initialize(variant: :default, **attributes)
+      @variant = variant
+      super(**attributes)
+    end
+
+    def title(**attributes, &)
+      AlertTitle(**attributes, &)
+    end
+
+    def description(**attributes, &)
+      AlertDescription(**attributes, &)
+    end
+
+    def default_attributes
+      { role: "alert" }
+    end
+
+    def default_styles
+      "#{STYLES} #{VARIANTS[@variant]}"
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/alert_description.rb

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

data/lib/components/alert_dialog.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialog < Base
+    STYLES = "inline-block"
+
+    def initialize(aria_id: "alert-dialog-#{SecureRandom.hex(5)}", **attributes)
+      @aria_id = aria_id
+      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, &block)
+      AlertDialogActionTo(name, options, html_options, &block)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--alert-dialog",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/alert_dialog_action.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialogAction < Base
+    def initialize(variant: :primary, **attributes)
+      @variant = variant
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          action: "click->shadcn-phlexcomponents--alert-dialog#close",
+        },
+      }
+    end
+    
+    def view_template(&)
+      Button(variant: @variant, **@attributes, &)
+    end
+  end
+end

data/lib/components/alert_dialog_action_to.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialogActionTo < Base
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+    end
+
+    def default_attributes
+      {
+        data: {
+          action: "click->shadcn-phlexcomponents--alert-dialog#close",
+        },
+      }
+    end
+
+    def default_styles
+      Button.default_styles(variant: @variant, size: :default)
+    end
+
+    def view_template(&)
+      @html_options, @options = @options, @name if block_given?
+      @html_options ||= {}
+      @variant = @html_options.delete(:variant) || :primary
+      @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/alert_dialog_cancel.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialogCancel < Base
+    def initialize(variant: :outline, **attributes)
+      @variant = variant
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          action: "click->shadcn-phlexcomponents--alert-dialog#close",
+        },
+      }
+    end
+
+    def view_template(&)
+      Button(variant: @variant, **@attributes, &)
+    end
+  end
+end

data/lib/components/alert_dialog_content.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialogContent < Base
+    STYLES = <<~HEREDOC
+      fixed left-[50%] top-[50%] z-50 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
+
+    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",
+          "shadcn-phlexcomponents--alert-dialog-target": "content",
+        },
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+      div(class: "#{@class} hidden", **@attributes, &)
+    end
+  end
+end

data/lib/components/alert_dialog_description.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialogDescription < Base
+    STYLES = "text-sm text-muted-foreground"
+
+    def initialize(aria_id:, **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/alert_dialog_footer.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialogFooter < 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/alert_dialog_header.rb

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

data/lib/components/alert_dialog_title.rb

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