nitro_kit 0.2.0 → 0.4.0

data/app/components/nitro_kit/checkbox.rb

@@ -1,37 +1,33 @@
 module NitroKit
   class Checkbox < Component
-    include ActionView::Helpers::FormTagHelper
+    def initialize(label: nil, id: nil, **attrs)
+      @id = id || "nk--" + SecureRandom.hex(4)
+      @label = label
 
-    def initialize(name, value: "1", label: nil, **attrs)
-      super(**attrs)
-
-      @name = name
-      @label_text = label
+      super(
+        attrs,
+        id: @id,
+        type: "checkbox",
+        class: input_class
+      )
     end
 
-    attr_reader(
-      :name,
-      :value,
-      :label_text
-    )
+    alias :html_label :label
+
+    attr_reader :label, :id
 
     def view_template
-      div(class: merge(["isolate inline-flex items-center gap-2", attrs[:class]])) do
-        label(class: "relative flex shrink-0") do
-          input(
-            **attrs,
-            type: "checkbox",
-            class: class_names(
-              "peer appearance-none shadow-sm size-4 rounded-sm border text-foreground",
-              "checked:bg-primary checked:border-primary",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            )
-          )
+      div(class: wrapper_class) do
+        html_label(
+          class: "inline-grid *:[grid-area:1/1] shrink-0 place-items-center group/checkbox"
+        ) do
+          input(**attrs)
           checkmark
+          dash
         end
 
-        if label_text.present?
-          render(Label.new(for: attrs[:id])) { label_text }
+        if label.present? || block_given?
+          render(Label.new(for: id)) { label || yield }
         end
       end
     end
@@ -39,24 +35,46 @@ module NitroKit
     private
 
     def checkmark
-      span(
-        class: class_names(
-          "absolute w-full h-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-          "text-zinc-50 dark:text-zinc-950 opacity-0 peer-checked:opacity-100 pointer-events-none"
-        )
-      ) do
-        svg(
-          class: "size-full",
-          viewbox: "0 0 20 20",
-          fill: "currentColor",
-          stroke: "currentColor",
-          stroke_width: 1
-        ) do |svg|
-          svg.path(
-            "d" => "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-          )
-        end
+      svg(
+        class: merge_class(svg_class, "group-has-[:checked]/checkbox:visible"),
+        viewbox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        stroke_width: 3
+      ) do |svg|
+        svg.path(d: "M 3 8 L 6 12 L 13 5")
+      end
+    end
+
+    def dash
+      svg(
+        class: merge_class(svg_class, "group-has-[:indeterminate]/checkbox:visible"),
+        viewbox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_linecap: "round",
+        stroke_width: 3
+      ) do |svg|
+        svg.line(x1: "3", y1: "8", x2: "13", y2: "8")
       end
     end
+
+    def input_class
+      [
+        "appearance-none shadow-sm size-4 rounded-sm border text-foreground",
+        "checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-2 ring-offset-background"
+      ]
+    end
+
+    def svg_class
+      "size-3 text-zinc-50 [&>svg]:size-full dark:text-zinc-950 pointer-events-none invisible"
+    end
+
+    def wrapper_class
+      "isolate inline-flex items-center gap-2"
+    end
   end
 end

data/app/components/nitro_kit/checkbox_group.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class CheckboxGroup < Component
+    def initialize(options = nil, **attrs)
+      @options = options
+
+      super(
+        attrs,
+        class: "flex items-start flex-col gap-2"
+      )
+    end
+
+    attr_reader :options
+
+    def view_template
+      div(**attrs) do
+        if block_given?
+          yield
+        else
+          options.map { |option| item(*option) }
+        end
+      end
+    end
+
+    def title(text = nil, **attrs, &block)
+      render(Label.new(**attrs)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def item(text = nil, **attrs, &block)
+      render(Checkbox.new(**attrs)) do
+        text_or_block(text, &block)
+      end
+    end
+  end
+end

data/app/components/nitro_kit/combobox.rb

@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Combobox < Component
+    def initialize(
+      options: [],
+      id: nil,
+
+      placement: "bottom",
+      tab_inserts_suggestions: true,
+      first_option_selection_mode: "selected",
+      scroll_into_view_options: {block: "nearest", inline: "nearest"},
+
+      **attrs
+    )
+      # floating-ui options
+      @placement = placement
+
+      # combobox-nav options
+      @tab_inserts_suggestions = tab_inserts_suggestions
+      @first_option_selection_mode = first_option_selection_mode
+      @scroll_into_view_options = scroll_into_view_options
+
+      @id = id || "nk--combobox-" + SecureRandom.hex(4)
+
+      @options = options
+
+      super(
+        attrs,
+        type: "text",
+        class: input_class,
+        data: {
+          nk__combobox_target: "input",
+          action: %w[
+            focusin->nk--combobox#open
+            focusin@window->nk--combobox#focusShift
+            click@window->nk--combobox#windowClick
+            input->nk--combobox#input
+            keydown.esc->nk--combobox#clear
+            keydown.down->nk--combobox#open
+          ]
+        },
+        aria: {
+          controls: id(:listbox)
+        }
+      )
+    end
+
+    attr_reader(
+      :options,
+      :placement,
+      :tab_inserts_suggestions,
+      :first_option_selection_mode,
+      :scroll_into_view_options
+    )
+
+    def view_template
+      div(
+        data: {
+          class: "isolate",
+          slot: "control",
+          controller: "nk--combobox",
+          nk__combobox_placement_value: placement,
+          nk__combobox_tab_inserts_suggestions_value: tab_inserts_suggestions.to_s,
+          nk__combobox_first_option_selection_mode_value: first_option_selection_mode.to_s,
+          nk__combobox_scroll_into_view_options_value: scroll_into_view_options&.to_json
+        }
+      ) do
+        span(class: wrapper_class) do
+          render(Input.new(**attrs))
+          chevron_icon
+        end
+
+        # Since a combobox can function like a <select> element where the displayed
+        # value and the form value differ, include the value in a hidden field
+        input(
+          type: "hidden",
+          value: attrs[:value],
+          data: {nk__combobox_target: "hiddenField"}
+        )
+
+        ul(
+          role: "listbox",
+          id: id(:listbox),
+          class: list_class,
+          data: {nk__combobox_target: "list", state: "closed"}
+        ) do
+          options.each do |(key, value)|
+            li(
+              role: "option",
+              data: {value:},
+              class: merge_class(option_class)
+            ) { key }
+          end
+        end
+      end
+    end
+
+    private
+
+    def id(suffix)
+      "#{@id}-#{suffix}"
+    end
+
+    def wrapper_class
+      "inline-grid *:[grid-area:1/1] group/combobox"
+    end
+
+    def input_class
+      "pr-8"
+    end
+
+    def list_class
+      [
+        "absolute top-0 left-0 p-1 bg-background rounded-md border shadow-sm w-fit max-w-sm flex-col flex z-10",
+        "max-h-60 overflow-y-auto",
+        "data-[state=closed]:hidden [&:not(:has([role=option]))]:hidden",
+        "[&_[aria-selected]]:bg-muted"
+      ]
+    end
+
+    def option_class
+      "hidden flex-none px-2 py-1 rounded font-medium truncate cursor-pointer hover:bg-muted [&[role=option]]:block"
+    end
+
+    def chevron_icon
+      svg(
+        class: "size-4 self-center place-self-end mr-2 pointer-events-none text-muted-foreground group-hover/combobox:text-foreground",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: 1
+      ) do |svg|
+        svg.path(d: "m6 9 6 6 6-6")
+      end
+    end
+  end
+end

data/app/components/nitro_kit/component.rb

@@ -1,29 +1,60 @@
-module NitroKit
-  Merger = TailwindMerge::Merger.new
+# frozen_string_literal: true
 
+module NitroKit
   class Component < Phlex::HTML
-    attr_reader :attrs
-
-    def initialize(**attrs)
-      @attrs = attrs.symbolize_keys
+    def initialize(*hashes, **defaults)
+      @attrs = merge_attrs(*hashes, **defaults)
     end
 
     attr_reader :attrs
 
-    def merge(*args)
-      self.class.merge(*args)
+    private
+
+    # Merge attributes with some special cases for matching keys
+    def merge_attrs(*hashes, **defaults)
+      defaults.merge(*hashes) do |key, old_value, new_value|
+        case key
+        when :class
+          # Use TailwindMerge to merge class names
+          merge_class(old_value, new_value)
+        when :data
+          # Merge data hashes with some special cases for Stimulus
+          merge_data(old_value, new_value)
+        else
+          new_value
+        end
+      end
     end
 
-    def self.merge(*args)
-      Merger.merge(args)
+    alias :mattr :merge_attrs
+
+    def merge_class(*args)
+      @@merger ||= TailwindMerge::Merger.new
+      @@merger.merge(args)
     end
 
-    def data_merge(*hashes)
-      hashes.compact.reverse.reduce({}) do |acc, hash|
-        acc.deep_merge(hash) do |_key, old_val, new_val|
-          [old_val, new_val].compact.join(" ")
+    def merge_data(*hashes)
+      hashes.compact.reduce({}) do |acc, hash|
+        acc.deep_merge(hash) do |key, old_val, new_val|
+          # Concat Stimulus actions
+          case key
+          when :action, :controller
+            [new_val, old_val].compact.join(" ")
+          else
+            new_val
+          end
         end
       end
     end
+
+    def text_or_block(text = nil, &block)
+      if text
+        plain(text)
+      elsif block_given?
+        yield
+      else
+        nil
+      end
+    end
   end
 end

data/app/components/nitro_kit/datepicker.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Datepicker < Component
+    def view_template
+      render(Input.new(type: "text", **attrs, data: {controller: "nk--datepicker"}))
+    end
+  end
+end

data/app/components/nitro_kit/dialog.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Dialog < Component
+    def initialize(identifier: nil, **attrs)
+      @identifier = identifier || SecureRandom.hex(6)
+
+      super(
+        attrs,
+        data: {controller: "nk--dialog", action: "click->nk--dialog#clickOutside"}
+      )
+    end
+
+    attr_reader :identifier
+
+    def view_template
+      div(**attrs) do
+        yield
+      end
+    end
+
+    def trigger(text = nil, **attrs, &block)
+      render(
+        NitroKit::Button.new(**mattr(attrs, data: {nk__dialog_target: "trigger", action: "click->nk--dialog#open"}))
+      ) do
+        text_or_block(text, &block)
+      end
+    end
+
+    alias :html_dialog :dialog
+
+    def dialog(**attrs)
+      html_dialog(
+        **mattr(
+          attrs,
+          class: dialog_class,
+          data: {nk__dialog_target: "dialog"},
+          aria: {
+            labelledby: id(:title),
+            describedby: id(:description)
+          }
+        )
+      ) do
+        yield
+      end
+    end
+
+    def close_button(**attrs)
+      render(
+        Button.new(
+          **mattr(
+            attrs,
+            variant: :ghost,
+            size: :sm,
+            class: "absolute top-2 right-2",
+            data: {action: "nk--dialog#close"}
+          )
+        )
+      ) do
+        render(Icon.new(:x))
+      end
+    end
+
+    def title(text = nil, **attrs, &block)
+      h2(**mattr(attrs, id: id(:title), class: "text-lg font-semibold mb-2")) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def description(text = nil, **attrs, &block)
+      div(
+        **mattr(
+          attrs,
+          id: id(:description),
+          class: "text-muted-foreground mb-6 text-sm leading-relaxed"
+        )
+      ) do
+        text_or_block(text, &block)
+      end
+    end
+
+    private
+
+    def id(suffix = nil)
+      "nk-#{identifier}#{suffix ? "-#{suffix}" : ""}"
+    end
+
+    def dialog_class
+      [
+        "border rounded-xl max-w-lg w-full bg-background text-foreground shadow-lg m-auto p-6",
+        "dark:backdrop:bg-black/50"
+      ]
+    end
+  end
+end

data/app/components/nitro_kit/dropdown.rb

@@ -1,111 +1,153 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Dropdown < Component
-    include Phlex::Rails::Helpers::LinkTo
-
-    CONTENT = [
-      "w-max-content absolute top-0 left-0",
-      "p-1 bg-background rounded-md border shadow-sm",
-      "w-fit max-w-sm flex-col text-left",
-      "[&[aria-hidden=true]]:hidden flex"
-    ].freeze
-
-    TRIGGER = "inline-block"
-
-    TITLE = "px-3 pt-2 pb-1.5 text-muted-foreground text-sm"
-
-    ITEM = [
-      "px-3 py-1.5 rounded",
-      "font-medium truncate",
-      "cursor-default"
-    ].freeze
+    ITEM_VARIANTS = %i[default destructive]
 
-    ITEM_VARIANTS = {
-      default: ["hover:bg-muted"],
-      destructive: ["text-destructive-foreground hover:bg-destructive hover:text-white"]
-    }.freeze
-
-    SEPARATOR = "border-t my-1 -mx-1"
+    include Phlex::Rails::Helpers::LinkTo
 
     def initialize(placement: nil, **attrs)
       @placement = placement
-      @attrs = attrs
+
+      super(
+        attrs,
+        data: {
+          controller: "nk--dropdown",
+          nk__dropdown_placement_value: placement
+        }
+      )
     end
 
     attr_reader :placement
 
-    def view_template(&block)
-      div(
-        data: data_merge(
-          {:controller => "nk--dropdown", :"nk--dropdown-placement-value" => placement},
-          attrs[:data]
-        ),
-        &block
-      )
+    def view_template
+      div(**mattr(attrs)) do
+        yield
+      end
     end
 
-    def trigger(**attrs, &block)
-      div(
+    def trigger(text = nil, as: NitroKit::Button, **attrs, &block)
+      trigger_attrs = mattr(
+        attrs,
         aria: {haspopup: "true", expanded: "false"},
-        **attrs,
-        class: merge([TRIGGER, attrs[:class]]),
-        data: data_merge(
-          {:"nk--dropdown-target" => "trigger", :action => "click->nk--dropdown#toggle"},
-          attrs[:data]
-        ),
-        &block
+        data: {nk__dropdown_target: "trigger", action: "click->nk--dropdown#toggle"}
       )
-    end
 
-    def content(**attrs, &block)
+      case as
+      when Symbol
+        send(as, **trigger_attrs) do
+          text_or_block(text, &block)
+        end
+      else
+        render(as.new(**trigger_attrs)) do
+          text_or_block(text, &block)
+        end
+      end
+    end
 
-      class_list = div(
-        role: "menu",
-        aria: {hidden: "true"},
-        **attrs,
-        class: merge([CONTENT, attrs[:class]]),
-        data: data_merge(
-          {:"nk--dropdown-target" => "content"},
-          attrs[:data]
-        ),
-        &block
-      )
+    def content(as: :div, **attrs)
+      div(
+        **mattr(
+          attrs,
+          role: "menu",
+          aria: {hidden: "true"},
+          class: content_class,
+          data: {nk__dropdown_target: "content"},
+          popover: true
+        )
+      ) do
+        yield
+      end
     end
 
     def title(text = nil, **attrs, &block)
-      class_list = merge([TITLE, attrs[:class]])
-      div(**attrs, class: class_list) { text || block.call }
+      div(**mattr(attrs, class: title_class)) do
+        text_or_block(text, &block)
+      end
     end
 
-    def item(
-      text = nil,
-      href = nil,
-      variant: :default,
-      **attrs
-    )
-      common_attrs = {
+    def item(text = nil, href: nil, variant: :default, **attrs, &block)
+      common_attrs = mattr(
+        attrs,
         role: "menuitem",
         tabindex: "-1",
-        **attrs,
-        class: merge([ITEM, ITEM_VARIANTS[variant], attrs[:class]])
-      }
+        class: [item_class, item_variant_class(variant)]
+      )
 
       if href
         link_to(href, **common_attrs) do
-          text || yield
+          text_or_block(text, &block)
         end
       else
         div(**common_attrs) do
-          text || yield
+          text_or_block(text, &block)
         end
       end
     end
 
+    def item_to(
+      text_or_href,
+      href = nil,
+      **attrs,
+      &block
+    )
+      href = text_or_href if block_given?
+      item(text_or_href, href: href, **attrs, &block)
+    end
+
     def destructive_item(*args, **attrs, &block)
       item(*args, **attrs, variant: :destructive, &block)
     end
 
+    def destructive_item_to(text_or_block, href = nil, **attrs, &block)
+      href = args.shift if block_given?
+      destructive_item(text_or_block, href: href, **attrs, &block)
+    end
+
     def separator
-      div(class: SEPARATOR)
+      hr(class: separator_class)
+    end
+
+    private
+
+    def content_class
+      [
+        "z-10 w-max-content absolute top-0 left-0",
+        "p-1 bg-background text-foreground rounded-md border shadow-sm",
+        "w-fit max-w-sm flex-col text-left",
+        "[&[aria-hidden=true]]:hidden flex"
+      ]
+    end
+
+    def trigger_class
+      ""
+    end
+
+    def title_class
+      "px-3 pt-2 pb-1.5 text-muted-foreground text-sm"
+    end
+
+    def item_class
+      [
+        "px-3 py-1.5 rounded",
+        "font-medium truncate",
+        "cursor-default"
+      ]
+    end
+
+    def item_variant_class(variant)
+      case variant
+      when :default
+        "[&[href]]:hover:bg-muted"
+      when :destructive
+        "text-destructive [&[href]]:hover:bg-destructive [&[href]]:hover:text-white"
+      else
+        raise ArgumentError, "Unknown variant: #{variant.inspect}"
+      end
+    end
+
+    def separator_class
+      "border-t my-1 -mx-1"
     end
   end
 end