lycan_ui 0.1.0

data/lib/generators/lycan_ui/templates/components/dialog.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Dialog < Component
+    def initialize(open: false, remote: false, **attributes)
+      @frame = if remote.present?
+        if remote.is_a?(String)
+          remote
+        else
+          "dialog"
+        end
+      end
+
+      super(
+        attributes,
+        data: {
+          controller: "dialog",
+          dialog_open_value: @frame.present? ? true : open,
+          dialog_frame_value: @frame,
+        }
+      )
+    end
+
+    def template(&block)
+      @labelledby = lycan_ui_id
+      @controls = lycan_ui_id
+
+      content = tag.div(**attributes) { yield self }
+
+      return turbo_frame_tag(@frame) { content } if @frame.present?
+
+      content
+    end
+
+    def trigger(content = nil, **trigger_attributes, &block)
+      raise ArgumentError, "Remote dialog cannot have a trigger" if @frame.present?
+
+      final_attributes = merge_attributes(
+        trigger_attributes,
+        data: { dialog_target: "trigger", action: "dialog#open" },
+        aria: { controls: @controls },
+      )
+
+      render(Button.new(content, **final_attributes), &block)
+    end
+
+    CONTENT_CLASSES = <<~CLASSES.squish
+      fixed left-1/2 top-1/2 z-50 open:grid max-w-lg -translate-x-1/2 -translate-y-1/2
+      gap-4 border border-surface bg-background p-6 shadow-lg rounded-lg
+      backdrop:bg-black/65 not-open:backdrop:hidden
+      motion-safe:transition-[opacity_transform_display] transition-discrete
+      starting:opacity-0 not-open:opacity-0 opacity-100
+      starting:scale-95 not-open:scale-95 scale-100
+      starting:-translate-y-[48%] not-open:-translate-y-[48%]
+    CLASSES
+    CLOSE_CLASSES = <<~CLASSES.squish
+      absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
+      transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2
+      focus-visible:ring-accent focus-visible:ring-offset-2
+    CLASSES
+    def content(**content_attributes, &)
+      final_attributes = merge_attributes(
+        content_attributes,
+        class: CONTENT_CLASSES,
+        aria: { labelledby: @labelledby },
+        data: { dialog_target: "content" },
+      )
+
+      close_btn = tag.button(class: CLOSE_CLASSES, type: "button", data: { action: "dialog#close" }) do
+        lucide_icon("x", class: "size-4")
+      end
+
+      tag.dialog(id: @controls, **final_attributes) do
+        safe_join([ @view_context.capture(&), close_btn ])
+      end
+    end
+
+    def form(**form_attributes, &)
+      final_attributes = merge_attributes(
+        form_attributes,
+        class: "contents",
+        data: { action: "turbo:submit-end->dialog#closeOnFormSubmit" },
+      )
+
+      if respond_to?(:lycan_ui_form_with)
+        lycan_ui_form_with(**final_attributes, &)
+      else
+        form_with(**final_attributes, &)
+      end
+    end
+
+    def header(**header_attributes, &)
+      final_attributes = merge_attributes(
+        header_attributes,
+        class: "flex flex-col space-y-1.5 text-center sm:text-left",
+      )
+
+      tag.div(**final_attributes, &)
+    end
+
+    def title(content = nil, **title_attributes, &)
+      final_attributes = merge_attributes(
+        title_attributes,
+        class: "text-lg font-semibold leading-none tracking-tight",
+      )
+
+      tag.h2(**final_attributes) { determine_content(content, &) }
+    end
+
+    def description(content = nil, **description_attributes, &)
+      final_attributes = merge_attributes(
+        description_attributes,
+        id: @labelledby,
+        class: "text-sm text-on-background/90",
+      )
+
+      tag.p(**final_attributes) { determine_content(content, &) }
+    end
+
+    def footer(**footer_attributes, &)
+      final_attributes = merge_attributes(
+        footer_attributes,
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      )
+
+      tag.div(**final_attributes, &)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/dropdown.rb

@@ -0,0 +1,242 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Dropdown < Component
+    def initialize(typeahead: true, **attributes)
+      super(
+        attributes,
+        data: {
+          controller: "dropdown",
+          action: "keydown->dropdown#handleKeydown",
+          dropdown_typeahead_value: typeahead,
+        }
+      )
+    end
+
+    def template(&block)
+      @labelledby = lycan_ui_id
+      @controls = lycan_ui_id
+
+      tag.div(**attributes) do
+        yield self
+
+        concat(safe_join(@submenus)) if @submenus&.any?
+      end
+    end
+
+    def trigger(content = nil, **trigger_attributes, &block)
+      final_attributes = merge_attributes(
+        trigger_attributes,
+        data: { dropdown_target: "trigger", action: "dropdown#toggle" },
+        aria: { has_popup: true, expanded: false, controls: @controls },
+      )
+
+      render(Button.new(content, id: @labelledby, **final_attributes), &block)
+    end
+
+    CONTENT_CLASSES = <<~CLASSES.squish
+      absolute z-50 min-w-32 overflow-y-auto overflow-x-hidden shadow-md
+      bg-background text-on-background border border-surface p-1 rounded-md
+      data-[open=false]:invisible motion-safe:transition-[opacity_transform]
+      will-change-[opacity,transform] duration-150
+      data-[open=false]:opacity-0 opacity-100
+      data-[open=false]:scale-95 scale-100
+      data-[open=false]:data-[side=bottom]:-translate-y-2 translate-y-0
+      data-[open=false]:data-[side=top]:translate-y-2
+      data-[open=false]:data-[side=left]:translate-x-2
+      data-[open=false]:data-[side=right]:-translate-x-2
+    CLASSES
+    def content(**content_attributes, &)
+      final_attributes = merge_attributes(
+        content_attributes,
+        role: "menu",
+        class: CONTENT_CLASSES,
+        aria: { labelledby: @labelledby },
+        data: { open: false, dropdown_target: "content" },
+      )
+
+      tag.div(id: @controls, **final_attributes, &)
+    end
+
+    def title(content = nil, **title_attributes, &block)
+      final_attributes = merge_attributes(title_attributes, { class: "px-2 py-1.5 text-sm font-semibold" })
+
+      tag.div(**final_attributes) { determine_content(content, &block) }
+    end
+
+    def separator
+      tag.div(role: "separator", aria_orientation: "horizontal", class: "-mx-1 my-1 h-px bg-surface")
+    end
+
+    def group(&block)
+      tag.div(role: "group", &block)
+    end
+
+    ITEM_CLASSES = <<~CLASSES.squish
+      relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm
+      outline-none transition-colors cursor-pointer focus:bg-accent focus:text-on-accent
+      aria-disabled:pointer-events-none aria-disabled:opacity-50
+      disabled:pointer-events-none disabled:opacity-50
+      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+    CLASSES
+    def submenu(id: lycan_ui_id, &block)
+      @current_submenu_id = id
+
+      yield @current_submenu_id
+
+      @current_submenu_id = nil
+    end
+
+    SUBMENU_TRIGGER_ACTIONS = <<~ACTIONS.squish
+      pointerenter->dropdown#focusItem pointerleave->dropdown#focusTrigger
+      pointerenter->dropdown#openSubmenu keydown.right->dropdown#openSubmenu:prevent
+      dropdown#openSubmenu
+    ACTIONS
+    def submenu_trigger(name = nil, **attributes, &block)
+      final_attributes = merge_attributes(
+        attributes,
+        { class: "aria-expanded:bg-accent aria-expanded:text-on-accent" },
+        class: ITEM_CLASSES,
+        tabindex: "-1",
+        role: "menuitem",
+        aria: {
+          has_popup: true,
+          expanded: false,
+          controls: @current_submenu_id,
+        },
+        data: {
+          dropdown_target: "item",
+          action: SUBMENU_TRIGGER_ACTIONS,
+          dropdown_submenu_param: @current_submenu_id,
+          submenu: @current_submenu_id,
+        },
+      )
+
+      tag.button(**final_attributes) { determine_content(name, &block) }
+    end
+
+    def submenu_content(**content_attributes, &)
+      final_attributes = merge_attributes(
+        content_attributes,
+        role: "menu",
+        class: CONTENT_CLASSES,
+        data: {
+          dropdown_target: "submenu",
+          action: "keydown->dropdown#submenuHandleKeydown",
+          dropdown_submenu_param: @current_submenu_id,
+          open: false,
+        },
+      )
+
+      @submenus ||= []
+      @submenus << tag.div(id: @current_submenu_id, **final_attributes, &)
+
+      # this must return nil to ensure the submenus are rerendered outside
+      # the original dropdown menu
+      nil
+    end
+
+    def link(name = nil, options = nil, html_options = nil, &block)
+      html_options, options, name = options, name, block if block_given?
+
+      html_options ||= {}
+      disabled = html_options.delete(:disabled)
+      close = html_options.delete(:close)
+      close = true if close.nil?
+
+      html_options = merge_attributes(
+        html_options,
+        class: ITEM_CLASSES,
+        role: "menuitem",
+        tabindex: "-1",
+        aria: { disabled: },
+      )
+
+      close_action = close ? "dropdown#close" : ""
+      html_options = if @current_submenu_id.present?
+       merge_attributes(html_options, data: {
+         dropdown_target: "submenuItem",
+         action: "pointerenter->dropdown#focusItem pointerleave->dropdown#focusSubmenuTrigger #{close_action}",
+         dropdown_submenu_param: @current_submenu_id,
+         submenu: @current_submenu_id,
+       })
+      else
+        merge_attributes(html_options, data: {
+          dropdown_target: "item",
+          action: "pointerenter->dropdown#focusItem pointerleave->dropdown#focusTrigger #{close_action}",
+        })
+      end
+
+      if block_given?
+        link_to(options, html_options, &block)
+      else
+        link_to(name, options, html_options)
+      end
+    end
+
+    def action(name = nil, options = nil, html_options = nil, &block)
+      html_options, options, name = options, name, block if block_given?
+      html_options ||= {}
+
+      disabled = html_options.delete(:disabled)
+      close = html_options.delete(:close)
+      close = true if close.nil?
+
+      html_options = merge_attributes(
+        html_options,
+        role: "menuitem",
+        class: ITEM_CLASSES,
+        tabindex: "-1",
+        disabled:,
+      )
+
+      close_action = close ? "dropdown#close" : ""
+      html_options = if @current_submenu_id.present?
+       merge_attributes(html_options, data: {
+         dropdown_target: "submenuItem",
+         action: "pointerenter->dropdown#focusItem pointerleave->dropdown#focusSubmenuTrigger #{close_action}",
+         dropdown_submenu_param: @current_submenu_id,
+         submenu: @current_submenu_id,
+       })
+      else
+        merge_attributes(html_options, data: {
+          dropdown_target: "item",
+          action: "pointerenter->dropdown#focusItem pointerleave->dropdown#focusTrigger #{close_action}",
+        })
+      end
+
+      if block_given?
+        button_to(options, html_options, &block)
+      else
+        button_to(name, options, html_options)
+      end
+    end
+
+    def button(name = nil, close: true, disabled: false, **attributes, &block)
+      close_action = close ? "dropdown#close" : ""
+
+      attributes = merge_attributes(
+        attributes,
+        role: "menuitem",
+        class: ITEM_CLASSES,
+        tabindex: "-1",
+        disabled:,
+      )
+      attributes = if @current_submenu_id.present?
+       merge_attributes(attributes, data: {
+         dropdown_target: "submenuItem",
+         action: "pointerenter->dropdown#focusItem pointerleave->dropdown#focusSubmenuTrigger #{close_action}",
+         dropdown_submenu_param: @current_submenu_id,
+         submenu: @current_submenu_id,
+       })
+      else
+        merge_attributes(attributes, data: {
+          dropdown_target: "item",
+          action: "pointerenter->dropdown#focusItem pointerleave->dropdown#focusTrigger #{close_action}",
+        })
+      end
+
+      tag.button(**attributes) { determine_content(name, &block) }
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/input.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Input < Component
+    attr_reader :object_name, :method, :type
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      flex h-10 w-full rounded-md px-3 py-2 text-sm bg-surface text-on-surface
+      file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-on-surface/50
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent
+      disabled:cursor-not-allowed disabled:opacity-50
+    CLASSES
+
+    def initialize(object_name, method, options = {})
+      @object_name = object_name
+      @method = method
+      @type = options.delete(:type) || :text
+
+      super(options, class: DEFAULT_CLASSES)
+    end
+
+    def template
+      send("#{type}_field", object_name, method, **attributes)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/label.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Label < Component
+    attr_reader :object_name, :method, :content
+
+    DEFAULT_CLASSES = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+
+    def initialize(object_name, method, content_or_options = nil, options = nil)
+      @object_name = object_name
+      @method = method
+
+      attributes = options
+
+      if content_or_options.is_a?(Hash)
+        attributes = content_or_options
+        @content = nil
+      else
+        attributes = options || {}
+        @content = content_or_options
+      end
+
+      super(attributes, class: DEFAULT_CLASSES)
+    end
+
+    def render_in(view_context, &)
+      view_context.label(object_name, method, content, **attributes, &)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/popover.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Popover < Component
+    def initialize(**attributes)
+      super(
+        attributes,
+        data: {
+          controller: "popover",
+        }
+      )
+    end
+
+    def template(&block)
+      @labelledby = lycan_ui_id
+      @controls = lycan_ui_id
+
+      tag.div(**attributes) { yield self }
+    end
+
+    def trigger(content = nil, **trigger_attributes, &block)
+      final_attributes = merge_attributes(
+        trigger_attributes,
+        data: { popover_target: "trigger", action: "popover#toggle" },
+        aria: { has_popup: true, expanded: false, controls: @controls },
+      )
+
+      render(Button.new(content, id: @labelledby, **final_attributes), &block)
+    end
+
+    CONTENT_CLASSES = <<~CLASSES.squish
+      absolute z-50 min-w-32 overflow-y-auto overflow-x-hidden shadow-md
+      bg-background text-on-background border border-surface p-4 rounded-md
+      not-open:invisible not-open:block motion-safe:transition-[opacity_transform]
+      will-change-[opacity,transform] duration-150
+      not-open:opacity-0 opacity-100
+      not-open:scale-95 scale-100
+      not-open:data-[side=bottom]:-translate-y-2 translate-y-0
+      not-open:data-[side=top]:translate-y-2
+      not-open:data-[side=left]:translate-x-2
+      not-open:data-[side=right]:-translate-x-2
+    CLASSES
+    def content(**content_attributes, &)
+      final_attributes = merge_attributes(
+        content_attributes,
+        class: CONTENT_CLASSES,
+        data: { popover_target: "content" },
+      )
+
+      tag.dialog(id: @controls, **final_attributes, &)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/radio.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Radio < Component
+    attr_reader :object_name, :method, :tag_value
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      flex size-4 cursor-pointer appearance-none items-center justify-center
+      rounded-full border-2 border-surface motion-safe:transition-all
+      before:size-0 before:rounded-full before:bg-accent
+      checked:border-accent checked:before:size-2
+      motion-safe:before:transition-all
+    CLASSES
+
+    def initialize(object_name, method, tag_value, options = {})
+      @object_name = object_name
+      @method = method
+      @tag_value = tag_value
+
+      super(options, class: DEFAULT_CLASSES)
+    end
+
+    def template
+      radio_button(object_name, method, tag_value, **attributes)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/select.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Select < Component
+    attr_reader :object_name, :method, :choices, :options
+
+    CLASSES = <<~CLASSES.squish
+      appearance-none bg-surface text-on-surface rounded-md border border-surface
+      px-3 py-2 pr-10 w-full focus-visible:outline-none ring-primary ring-offset-2
+      ring-offset-background focus-visible:ring-2 peer/select cursor-pointer
+      scheme-light
+
+      [&_option]:bg-background
+    CLASSES
+    def initialize(object_name, method, choices = nil, options = {}, html_options = {})
+      @object_name = object_name
+      @method = method
+      @choices = choices
+      @options = options
+
+      super(html_options, class: CLASSES)
+    end
+
+    ICON_CLASSES = <<~CLASSES.squish
+      size-4 self-center place-self-end mr-2 text-on-surface/80
+      pointer-events-none group-hover/select:text-on-surface
+      peer-open/select:rotate-180 motion-safe:transition-transform
+    CLASSES
+    def render_in(view_context, &)
+      view_context.tag.div(class: "w-fit h-10 inline-grid *:[grid-area:1/1] group/select") do
+        view_context.safe_join([
+          view_context.select(object_name, method, choices, options, attributes, &),
+          view_context.lucide_icon("chevron-down", class: ICON_CLASSES),
+        ])
+      end
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/switch.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Switch < Component
+    attr_reader :object_name, :method, :checked_value, :unchecked_value
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      appearance-none cursor-pointer rounded-full disabled:opacity-50 disabled:cursor-not-allowed
+      w-10 h-5 bg-background shadow-switch checked:shadow-switch-checked
+      motion-safe:transition-all motion-safe:duration-500 motion-safe:ease-in-out
+    CLASSES
+
+    def initialize(object_name, method, options = {}, checked_value = "1", unchecked_value = "0")
+      @object_name = object_name
+      @method = method
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+
+      super(options, role: "switch", class: DEFAULT_CLASSES)
+    end
+
+    def template
+      checkbox(object_name, method, attributes, checked_value, unchecked_value)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/components/textarea.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module LycanUi
+  class Textarea < Component
+    attr_reader :object_name, :method
+
+    DEFAULT_CLASSES = <<~CLASSES.squish
+      flex min-h-20 w-full rounded-md bg-surface text-on-surface
+      px-3 py-2 text-base placeholder:text-on-surface/50 md:text-sm
+      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent
+      disabled:cursor-not-allowed disabled:opacity-50
+    CLASSES
+
+    def initialize(object_name, method, options = {})
+      @object_name = object_name
+      @method = method
+
+      super(options, class: DEFAULT_CLASSES)
+    end
+
+    def template
+      text_area(object_name, method, **attributes)
+    end
+  end
+end

data/lib/generators/lycan_ui/templates/extras/form_builder.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module LycanUi
+  module FormHelper
+    class FormBuilder < ActionView::Helpers::FormBuilder
+      [
+        :date,
+        :datetime,
+        :email,
+        :month,
+        :number,
+        :password,
+        :search,
+        :telephone,
+        :text,
+        :url,
+        :week,
+      ].each do |type|
+        define_method("#{type}_field") do |method, options = {}|
+          options = objectify_options(options)
+          options[:type] = type
+
+          @template.ui.input(@object_name, method, options)
+        end
+      end
+
+      def button(value = nil, options = {}, &block)
+        case value
+        when Hash
+          value, options = nil, value
+        when Symbol
+          value, options = nil, { name: field_name(value), id: field_id(value) }.merge!(options.to_h)
+        end
+        value ||= submit_default_value
+
+        if block_given?
+          value = @template.capture { yield(value) }
+        end
+
+        formmethod = options[:formmethod]
+        if formmethod.present? && !/post|get/i.match?(formmethod) && !options.key?(:name) && !options.key?(:value)
+          options.merge!(formmethod: :post, name: "_method", value: formmethod)
+        end
+
+        options[:type] ||= :submit
+
+        @template.ui.button(value, **options)
+      end
+
+      def checkbox(method, options = {}, checked_value = "1", unchecked_value = "0")
+        @template.ui.checkbox(@object_name, method, objectify_options(options), checked_value, unchecked_value)
+      end
+
+      def file_field(method, options = {})
+        self.multipart = true
+        options = objectify_options(options)
+        options[:type] = :file
+
+        @template.ui.input(@object_name, method, options)
+      end
+
+      def label(method, text = nil, options = {}, &block)
+        @template.ui.label(@object_name, method, text, objectify_options(options), &block)
+      end
+
+      def radio_button(method, tag_value, options = {})
+        @template.ui.radio(@object_name, method, tag_value, objectify_options(options))
+      end
+
+      def submit(value = nil, options = {})
+        value, options = nil, value if value.is_a?(Hash)
+        value ||= submit_default_value
+
+        button(value, options)
+      end
+
+      def switch(method, options = {}, checked_value = "1", unchecked_value = "0")
+        @template.ui.switch(@object_name, method, objectify_options(options), checked_value, unchecked_value)
+      end
+
+      def textarea(method, options = {})
+        @template.ui.textarea(@object_name, method, objectify_options(options))
+      end
+    end
+
+    def lycan_ui_form_with(*, **, &)
+      form_with(*, builder: FormBuilder, **, &)
+    end
+  end
+end