nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/components/nitro_kit/toast.rb

@@ -2,122 +2,253 @@
 
 module NitroKit
   class Toast < Component
-    class FlashMessages < Component
-      def initialize(flash)
-        @flash = flash
-      end
+    DEFAULT_ID = "nk-toast"
 
-      attr_reader :flash
-
-      def view_template
-        flash.each do |severity, message|
-          render(
-            Toast::Item.new(
-              description: message,
-              variant: severity.to_sym == :alert ? :error : :default
-            )
-          )
-        end
-      end
-    end
+    ItemDeclaration = ::Data.define(:component, :content)
+    private_constant :ItemDeclaration
 
     class Item < Component
-      VARIANTS = %i[default warning error success]
-
-      def initialize(title: nil, description: nil, variant: :default, **attrs)
-        @title = title
-        @description = description
-        @variant = variant
+      VARIANTS = %i[default info success warning error].freeze
+      ASSERTIVE_VARIANTS = %i[error].freeze
+
+      def initialize(
+        title: nil,
+        description: nil,
+        variant: :default,
+        dismissible: true,
+        id: nil,
+        html: {},
+        aria: {},
+        data: {},
+        desperately_need_a_class: nil
+      )
+        @title = optional_text(:title, title)
+        @description = optional_text(:description, description)
+        @variant = validate_choice!(:variant, variant, VARIANTS)
+        @dismissible = validate_boolean!(:dismissible, dismissible)
 
         super(
-          **mattr(
-            attrs,
-            class: [
-              base_class,
-              variant_class
-            ],
-            role: "status",
-            aria: { live: "off", atomic: "true" },
-            tabindex: "0",
-            data: { state: "closed" }
-          )
+          component: :toast_item,
+          attributes: {
+            id:,
+            role: ASSERTIVE_VARIANTS.include?(@variant) ? "alert" : "status",
+            data: {
+              state: "open",
+              turbo_temporary: true,
+              nk__toast_target: "item",
+              nk__toast_permanent: dismissible ? nil : "true",
+              action: [
+                "pointerenter->nk--toast#pause",
+                "pointerleave->nk--toast#resume",
+                "focusin->nk--toast#pause",
+                "focusout->nk--toast#resume",
+                "transitionend->nk--toast#remove"
+              ].join(" ")
+            }
+          },
+          html:,
+          aria: aria.merge(atomic: true),
+          data:,
+          variant:,
+          desperately_need_a_class:
         )
       end
 
-      attr_reader :title, :description, :variant
+      attr_reader :title, :description, :variant, :dismissible
 
       def view_template(&block)
-        li(**attrs) do
-          div(class: "grid gap-1") do
-            div(class: "text-sm font-semibold", data: { slot: "title" }) do
-              title && plain(title)
-            end
-
-            div(class: "text-sm opacity-90", data: { slot: "description" }) do
-              text_or_block(description, &block)
-            end
+        if title.nil? && description.nil? && !block
+          raise ArgumentError, "Toast item requires a title, description, or block"
+        end
+
+        li(**root_attributes) do
+          div(**slot_attributes(:content)) do
+            p(**slot_attributes(:title)) { plain(title) } if title
+            div(**slot_attributes(:description)) do
+              block ? yield : plain(description.to_s)
+            end if description || block
           end
+
+          dismiss_button if dismissible
         end
       end
 
       private
 
-      def base_class
-        "shrink-0 pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md p-4 pr-8 shadow-lg transition-all border opacity-0 transition-all data-[state=open]:opacity-100 data-[state=open]:-translate-y-full"
+      def dismiss_button
+        render_in_slot(
+          Button.new(
+            icon: :x,
+            variant: :ghost,
+            size: :sm,
+            aria: { label: I18n.t("nitro_kit.toast.dismiss") },
+            data: { action: "click->nk--toast#dismiss" }
+          ),
+          :dismiss
+        )
       end
 
-      def variant_class
-        case variant
-        when :default
-          "border-border bg-background text-foreground"
-        when :warning
-          "bg-yellow-50 dark:bg-yellow-950 text-yellow-900 dark:text-yellow-100 border-yellow-500/80 dark:border-yellow-400/50"
-        when :success
-          "bg-green-50 dark:bg-green-950 text-green-900 dark:text-green-100 border-green-500/80 dark:border-green-400/50"
-        when :error
-          "bg-red-50 dark:bg-red-950 text-red-900 dark:text-red-100 border-red-400/80 dark:border-red-400/50"
-        else
-          raise ArgumentError, "Invalid variant `#{variant}'"
-        end
+      def optional_text(name, value)
+        return if value.nil?
+        return value if value.is_a?(String) && value.present?
+
+        raise ArgumentError, "Toast item #{name} must be nil or a non-blank String"
       end
     end
 
-    def initialize(**attrs)
-      super(
-        attrs,
-        role: "region",
-        tabindex: "-1",
-        aria: { label: "Notifications" },
-        class: "pointer-events-none"
+    class FlashMessages < Toast
+      VARIANT_BY_SEVERITY = {
+        "alert" => :error,
+        "error" => :error,
+        "warning" => :warning,
+        "success" => :success,
+        "info" => :info,
+        "notice" => :default
+      }.freeze
+
+      def initialize(
+        flash:,
+        duration: 5_000,
+        label: I18n.t("nitro_kit.toast.label"),
+        id: DEFAULT_ID,
+        html: {},
+        aria: {},
+        data: {},
+        desperately_need_a_class: nil
       )
-    end
+        unless flash.respond_to?(:each)
+          raise ArgumentError, "Toast::FlashMessages flash must be enumerable"
+        end
+
+        @flash = flash
 
-    def view_template
-      div(**attrs) do
-        ol(class: list_class, data: { nk__toast_target: "list" })
+        super(
+          duration:,
+          label:,
+          id:,
+          html:,
+          aria:,
+          data:,
+          desperately_need_a_class:
+        )
       end
 
-      flash_sink
+      attr_reader :flash
 
-      template(data: { nk__toast_target: "template" }) do
-        item
+      def view_template
+        super do |toast|
+          flash.each do |severity, message|
+            toast.item(
+              description: message.to_s,
+              variant: VARIANT_BY_SEVERITY.fetch(severity.to_s, :default)
+            )
+          end
+        end
+      end
+    end
+
+    def initialize(
+      duration: 5_000,
+      label: I18n.t("nitro_kit.toast.label"),
+      id: DEFAULT_ID,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil
+    )
+      unless duration.is_a?(Integer) && duration.positive?
+        raise ArgumentError, "Toast duration must be a positive Integer"
+      end
+      unless label.is_a?(String) && label.present?
+        raise ArgumentError, "Toast label must be a non-blank String"
+      end
+      unless id.is_a?(String) && id.present? && !id.match?(/\s/)
+        raise ArgumentError, "Toast id: must be a non-blank String without whitespace"
       end
+
+      @duration = duration
+      @id = id
+      @items = []
+
+      super(
+        component: :toast,
+        attributes: {
+          id:,
+          role: "region",
+          data: {
+            controller: "nk--toast",
+            action: "turbo:before-cache@document->nk--toast#teardown",
+            nk__toast_duration_value: duration
+          }
+        },
+        html:,
+        aria: aria.merge(label:, live: "polite"),
+        data:,
+        desperately_need_a_class:
+      )
     end
 
-    def item(title: nil, description: nil, **attrs, &block)
-      render(Item.new(title:, description:, **attrs), &block)
+    attr_reader :duration, :id
+
+    def list_id
+      "#{id}-list"
     end
 
-    def flash_sink
-      div(id: "nk--toast-sink", data: { nk__toast_target: "sink" }, hidden: true) do
-        render(FlashMessages.new(view_context.flash))
+    def view_template(&block)
+      collect_items(&block)
+
+      section(**root_attributes) do
+        ol(**slot_attributes(:list, attributes: { id: list_id })) do
+          @items.each do |entry|
+            render_in_slot(entry.component, :item, &entry.content)
+          end
+        end
       end
     end
 
+    def item(
+      title: nil,
+      description: nil,
+      variant: :default,
+      dismissible: true,
+      id: nil,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil,
+      &content
+    )
+      ensure_collecting!
+      component = Item.new(
+        title:,
+        description:,
+        variant:,
+        dismissible:,
+        id:,
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
+      )
+      @items << ItemDeclaration.new(component:, content:)
+      nil
+    end
+
     private
 
-    def list_class
-      "fixed z-[100] flex max-h-screen w-full p-5 bottom-0 right-0 flex-col h-0 md:max-w-[420px]"
+    def collect_items
+      return unless block_given?
+
+      @collecting = true
+      yield(self)
+    ensure
+      @collecting = false
+    end
+
+    def ensure_collecting!
+      return if @collecting
+
+      raise ArgumentError, "Toast items must be declared inside the render block"
     end
   end
 end

data/app/components/nitro_kit/toolbar.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Toolbar < Component
+    Region = Data.define(:content, :html, :aria, :data, :css_class)
+
+    def initialize(id: nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil)
+      @leading_region = nil
+      @trailing_region = nil
+
+      super(
+        component: :toolbar,
+        attributes: { id: }.compact,
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
+      )
+    end
+
+    def view_template
+      yield self if block_given?
+      validate_regions!
+
+      div(**root_attributes) do
+        render_region(:leading, @leading_region) if @leading_region
+        render_region(:trailing, @trailing_region) if @trailing_region
+      end
+    end
+
+    def leading(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      raise ArgumentError, "Toolbar accepts at most one leading region" if @leading_region
+      @leading_region = Region.new(
+        content: block,
+        html:,
+        aria:,
+        data:,
+        css_class: desperately_need_a_class
+      )
+      nil
+    end
+
+    def trailing(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      raise ArgumentError, "Toolbar accepts at most one trailing region" if @trailing_region
+      @trailing_region = Region.new(
+        content: block,
+        html:,
+        aria:,
+        data:,
+        css_class: desperately_need_a_class
+      )
+      nil
+    end
+
+    private
+
+    def render_region(name, region)
+      div(
+        **slot_attributes(
+          name,
+          html: region.html,
+          aria: region.aria,
+          data: region.data,
+          desperately_need_a_class: region.css_class
+        )
+      ) { render(region.content) if region.content }
+    end
+
+    def validate_regions!
+      return if @leading_region || @trailing_region
+
+      raise ArgumentError, "Toolbar requires a leading or trailing region"
+    end
+  end
+end

data/app/components/nitro_kit/tooltip.rb

@@ -2,54 +2,255 @@
 
 module NitroKit
   class Tooltip < Component
-    def initialize(content: nil, placement: nil, **attrs)
-      @string_content = content
-      @placement = placement
+    PLACEMENTS = %i[top right bottom left].freeze
+    HTML_TRIGGERS = %i[div span].freeze
+
+    TriggerAttributes = ::Data.define(:html, :aria, :data)
+
+    Trigger = ::Data.define(
+      :as,
+      :text,
+      :href,
+      :variant,
+      :size,
+      :icon,
+      :icon_end,
+      :label,
+      :disabled,
+      :target,
+      :rel,
+      :download,
+      :html,
+      :aria,
+      :data,
+      :css_class,
+      :content
+    )
+
+    def initialize(
+      id:,
+      content:,
+      placement: :top,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil
+    )
+      @identifier = component_id(id)
+      @content = tooltip_content(content)
+      @placement = validate_choice!(:placement, placement, PLACEMENTS)
 
       super(
-        attrs,
-        data: {
-          action: "mouseover->nk--tooltip#open mouseout->nk--tooltip#close",
-          controller: "nk--tooltip",
-          nk__tooltip_placement_value: placement
-        }
+        component: :tooltip,
+        attributes: {
+          id: @identifier,
+          data: {
+            controller: "nk--tooltip",
+            placement: @placement,
+            dismissed: nil,
+            action: "pointerleave->nk--tooltip#resetIfUninterested focusout->nk--tooltip#resetIfUninterested"
+          }
+        },
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
       )
     end
 
-    attr_reader :placement, :string_content
+    attr_reader :identifier, :content, :placement
 
-    def view_template
-      span(**attrs) do
-        content(string_content) if string_content
-        yield
-      end
-    end
+    def view_template(&block)
+      collect_trigger(&block)
 
-    def content(text = nil, **attrs, &block)
-      builder do
-        div(
-          **mattr(
-            attrs,
-            class: tooltip_class,
-            data: {
-              state: "closed",
-              nk__tooltip_target: "content"
+      span(**root_attributes) do
+        render_trigger
+        span(
+          **slot_attributes(
+            :content,
+            attributes: {
+              id: content_id,
+              role: "tooltip"
             }
           )
-        ) do
-          text_or_block(text, &block)
-        end
+        ) { plain(content) }
       end
     end
 
+    def trigger(
+      text = nil,
+      as: Button,
+      href: nil,
+      variant: :default,
+      size: :md,
+      icon: nil,
+      icon_end: nil,
+      label: nil,
+      target: nil,
+      rel: nil,
+      download: nil,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil,
+      &content
+    )
+      ensure_collecting!
+      raise ArgumentError, "Tooltip accepts exactly one trigger" if @trigger
+      unless as == Button || as == :custom || HTML_TRIGGERS.include?(as)
+        raise ArgumentError, "Tooltip as: must be NitroKit::Button, :custom, :div, or :span"
+      end
+      if text.nil? && !content && icon.nil?
+        raise ArgumentError, "Tooltip trigger requires text, a block, or an icon"
+      end
+      if as == :custom && content&.arity != 1
+        raise ArgumentError, "Tooltip custom trigger block must accept trigger attributes"
+      end
+      if as != Button && [ href, icon, icon_end, label, target, rel, download ].any?
+        raise ArgumentError, "Tooltip #{as.inspect} trigger does not accept Button options"
+      end
+
+      @trigger = Trigger.new(
+        as:,
+        text:,
+        href:,
+        variant:,
+        size:,
+        icon:,
+        icon_end:,
+        label:,
+        disabled: false,
+        target:,
+        rel:,
+        download:,
+        html:,
+        aria:,
+        data:,
+        css_class: desperately_need_a_class,
+        content:
+      )
+      nil
+    end
+
     private
 
-    def tooltip_class
-      [
-        "absolute z-50 overflow-hidden w-fit max-w-sm",
-        "px-3 py-1.5 text-sm bg-background rounded-md border shadow-sm",
-        "data-[state=closed]:hidden"
-      ]
+    def collect_trigger
+      raise ArgumentError, "Tooltip requires a trigger declaration block" unless block_given?
+
+      @collecting = true
+      yield(self)
+      raise ArgumentError, "Tooltip requires one trigger" unless @trigger
+    ensure
+      @collecting = false
+    end
+
+    def render_trigger
+      return render_custom_trigger if @trigger.as == :custom
+      return render_html_trigger if HTML_TRIGGERS.include?(@trigger.as)
+
+      component = Button.new(
+        @trigger.text,
+        href: @trigger.href,
+        variant: @trigger.variant,
+        size: @trigger.size,
+        icon: @trigger.icon,
+        icon_end: @trigger.icon_end,
+        label: @trigger.label,
+        disabled: @trigger.disabled,
+        target: @trigger.target,
+        rel: @trigger.rel,
+        download: @trigger.download,
+        id: trigger_id,
+        html: @trigger.html,
+        aria: with_description(@trigger.aria),
+        data: owned_data(@trigger.data),
+        desperately_need_a_class: @trigger.css_class
+      )
+
+      if @trigger.content
+        render_in_slot(component, :trigger) { render(@trigger.content) }
+      else
+        render_in_slot(component, :trigger)
+      end
+    end
+
+    def render_html_trigger
+      attributes = trigger_attributes
+      unless attributes.html.keys.any? { |key| normalized_attribute(key) == "tabindex" }
+        attributes.html[:tabindex] = 0
+      end
+
+      public_send(
+        @trigger.as,
+        **slot_attributes(
+          :trigger,
+          attributes: attributes.html,
+          aria: attributes.aria,
+          data: attributes.data
+        )
+      ) { text_or_block(@trigger.text, &@trigger.content) }
+    end
+
+    def render_custom_trigger
+      span(**slot_attributes(:trigger)) do
+        raw(safe(capture(trigger_attributes, &@trigger.content)))
+      end
+    end
+
+    def trigger_attributes
+      TriggerAttributes.new(
+        html: merge_distinct_attributes({ id: trigger_id }, @trigger.html),
+        aria: with_description(@trigger.aria),
+        data: owned_data(@trigger.data)
+      )
+    end
+
+    def owned_data(data)
+      action_key = data.keys.find { |key| key.to_s.tr("_", "-") == "action" }
+      app_action = action_key && data[action_key]
+      data.except(action_key).merge(
+        action: [
+          "keydown.esc->nk--tooltip#dismiss",
+          app_action
+        ].compact.join(" ")
+      )
+    end
+
+    def with_description(aria)
+      unless aria.is_a?(Hash)
+        raise ArgumentError, "aria must be a Hash"
+      end
+
+      key = aria.keys.find { |candidate| candidate.to_s.downcase.delete("_-") == "describedby" }
+      descriptions = key ? aria.fetch(key).to_s.split : []
+
+      aria.except(key).merge(describedby: (descriptions + [ content_id ]).uniq.join(" "))
+    end
+
+    def trigger_id
+      "#{identifier}-trigger"
+    end
+
+    def content_id
+      "#{identifier}-content"
+    end
+
+    def tooltip_content(value)
+      return value if value.is_a?(String) && value.present?
+
+      raise ArgumentError, "Tooltip content must be a non-blank String"
+    end
+
+    def component_id(value)
+      return value if value.is_a?(String) && value.present? && !value.match?(/\s/)
+
+      raise ArgumentError, "Tooltip id must be a non-blank String without whitespace"
+    end
+
+    def ensure_collecting!
+      return if @collecting
+
+      raise ArgumentError, "Tooltip trigger must be declared inside the render block"
     end
   end
 end