nitro_kit 0.1.0 → 0.3.0

data/app/components/nitro_kit/card.rb

@@ -1,23 +1,63 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Card < Component
     def initialize(**attrs)
-      @attrs = attrs
+      super(
+        attrs,
+        class: base_class
+      )
+    end
+
+    def view_template
+      div(**attrs) do
+        yield
+      end
+    end
+
+    def title(text = nil, **attrs, &block)
+      h2(**mattr(attrs, class: "text-lg font-bold -mb-2")) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def body(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: "text-muted-foreground text-sm leading-relaxed")) do
+        text_or_block(text, &block)
+      end
     end
 
-    def view_template(&block)
-      div(class: "rounded-lg border p-6 space-y-6 shadow-sm", &block)
+    def footer(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: "flex gap-2 items-center")) do
+        text_or_block(text, &block)
+      end
     end
 
-    def title(**attrs)
-      h2(**attrs, class: merge(["text-lg font-bold", attrs[:class]])) { yield }
+    def divider(**attrs)
+      full_width do
+        hr(**attrs)
+      end
     end
 
-    def body(**attrs)
-      div(**attrs) { yield }
+    def full_width(**attrs)
+      div(**mattr(attrs, data: {slot: "full"}, class: "-mx-(--gap)")) do
+        yield
+      end
     end
 
-    def footer(**attrs)
-      div(**attrs, class: merge(["flex gap-2", attrs[:class]])) { yield }
+    private
+
+    def base_class
+      [
+        # Configure spacing with breakpoints
+        "[--gap:calc(var(--spacing)*4)] sm:[--gap:calc(var(--spacing)*6)]",
+        # Base styles
+        "flex flex-col items-stretch rounded-lg bg-background border p-(--gap) gap-(--gap) overflow-hidden",
+        # If a `data-slot=full` is the first thing, move it to the top
+        "[&>[data-slot=full]:first-child]:-mt-(--gap)",
+        # Group for hover, focus
+        "group/card"
+      ]
     end
   end
 end

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", class_list])) do
-        label(class: "relative flex shrink-0") do
-          input(
-            **attrs,
-            type: "checkbox",
-            class: class_names(
-              "peer appearance-none shadow size-4 rounded 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 12 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: "12", 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,30 +1,59 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Component < Phlex::HTML
-    attr_reader :attrs, :class_list
-
-    def initialize(**attrs)
-      @class_list = attrs.delete(:class)
-      @attrs = attrs.symbolize_keys
+    def initialize(*hashes, **defaults)
+      @attrs = merge_attrs(*hashes, **defaults)
     end
 
-    attr_reader :class_list, :attrs
+    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 ||= TailwindMerge::Merger.new
-      @merger.merge(*args)
+    alias :mattr :merge_attrs
+
+    def merge_class(*args)
+      @@merger ||= TailwindMerge::Merger.new
+      @@merger.merge(args)
     end
 
-    def data_merge(data = {}, new_data = {})
-      return data if new_data.blank?
-      return new_data if data.blank?
+    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
 
-      data.deep_merge(new_data) do |_key, old_val, new_val|
-        # Put new value first so overrides can stopPropagation to old value
-        [new_val, old_val].compact.join(" ")
+    def text_or_block(text = nil, &block)
+      if text
+        plain(text)
+      elsif block_given?
+        yield
+      else
+        nil
       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