nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/components/nitro_kit/switch.rb

@@ -2,75 +2,132 @@
 
 module NitroKit
   class Switch < Component
+    SIZES = %i[md lg].freeze
+
     def initialize(
+      label: nil,
+      description: nil,
+      id: nil,
+      name: nil,
+      value: "1",
+      unchecked_value: "0",
+      include_hidden: true,
       checked: false,
+      disabled: false,
+      required: false,
+      invalid: false,
       size: :md,
-      description: nil,
-      **attrs
+      html: {},
+      aria: {},
+      data: {},
+      control_html: {},
+      control_aria: {},
+      control_data: {},
+      desperately_need_a_class: nil
     )
-      @checked = checked
-      @size = size
-      @description = description
+      @label = validate_optional_text!(:label, label)
+      @description = validate_optional_text!(:description, description)
+      @id = id
+      @name = name
+      @value = value
+      @unchecked_value = unchecked_value
+      @include_hidden = validate_boolean!(:include_hidden, include_hidden)
+      @checked = validate_boolean!(:checked, checked)
+      @disabled = validate_boolean!(:disabled, disabled)
+      @required = validate_boolean!(:required, required)
+      @invalid = validate_boolean!(:invalid, invalid)
+      @size = validate_choice!(:size, size, SIZES)
+      @control_html = control_html
+      @control_aria = control_aria
+      @control_data = control_data
 
-      super(**attrs)
+      if include_hidden && unchecked_value.nil?
+        raise ArgumentError, "unchecked_value cannot be nil when include_hidden is true"
+      end
+      if description && (!id.is_a?(String) || id.strip.empty?)
+        raise ArgumentError, "switch requires a non-blank String id when description is present"
+      end
+
+      super(
+        component: :switch,
+        size: @size,
+        attributes: {
+          data: { disabled: @disabled ? "true" : nil }.compact
+        },
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
+      )
     end
 
-    attr_reader :checked, :description, :size
+    attr_reader :label, :description, :id, :name, :value, :unchecked_value, :size
+
+    def view_template(&block)
+      require_accessible_name!(&block)
 
-    def view_template
-      button(
-        **mattr(
-          **attrs,
-          type: "button",
-          class: [ base_class, size_class ],
-          data: { controller: "nk--switch", action: "nk--switch#toggle" },
-          role: "switch",
-          aria: { checked: checked.to_s }
-        )
-      ) do
-        span(class: "sr-only") { description }
-        handle
+      div(**root_attributes) do
+        render_hidden_control
+
+        if label.nil? && !block
+          render_control
+          render_track
+        else
+          render_in_slot(Label.new(for: id), :label) do
+            render_control
+            render_track
+            span(**slot_attributes(:label_text)) { text_or_block(label, &block) }
+          end
+        end
+
+        # The description stays outside the label so aria-describedby carries it
+        # instead of it joining the control's accessible name.
+        if description
+          span(**slot_attributes(:description, attributes: { id: description_id })) { plain(description) }
+        end
       end
     end
 
     private
 
-    def handle
-      span(aria: { hidden: true }, class: handle_class, data: { slot: "handle" })
+    def render_track
+      span(**slot_attributes(:track), aria: { hidden: "true" }) do
+        span(**slot_attributes(:handle))
+      end
     end
 
-    def base_class
-      [
-        "inline-flex items-center shrink-0",
-        "bg-background rounded-full border",
-        "transition-colors duration-200 ease-in-out",
-        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background",
-
-        # Checked
-        "[&[aria-checked=true]]:bg-foreground [&[aria-checked=true]]:border-foreground",
+    def render_hidden_control
+      return unless @include_hidden && name
 
-        # Checked > Handle
-        "[&[aria-checked=false]_[data-slot=handle]]:bg-primary",
-        "[&[aria-checked=true]_[data-slot=handle]]:bg-background"
-      ]
+      render_in_slot(
+        Input.new(
+          type: :hidden,
+          name:,
+          value: unchecked_value,
+          disabled: @disabled,
+          autocomplete: "off"
+        ),
+        :unchecked
+      )
     end
 
-    def handle_class
-      [
-        "pointer-events-none inline-block rounded-full shadow-sm ring-0",
-        "transition translate-x-[3px] duration-200 ease-in-out"
-      ]
-    end
-
-    def size_class
-      case size
-      when :md
-        "h-6 w-10 [&_[data-slot=handle]]:size-4 [&[aria-checked=true]_[data-slot=handle]]:translate-x-[calc(theme(spacing.5)-1px)]"
-      when :sm
-        "h-5 w-8 [&_[data-slot=handle]]:size-3 [&[aria-checked=true]_[data-slot=handle]]:translate-x-[calc(theme(spacing.4)-1px)]"
-      else
-        raise ArgumentError, "Unknown size: #{size}"
-      end
+    def render_control
+      render_in_slot(
+        Input.new(
+          type: :checkbox,
+          id:,
+          name:,
+          value:,
+          checked: @checked,
+          disabled: @disabled,
+          required: @required,
+          # role is owned by Switch; a control_html role: is replaced, not merged.
+          html: @control_html.merge(role: "switch"),
+          aria: control_aria,
+          data: @control_data
+        ),
+        :control
+      )
     end
   end
 end

data/app/components/nitro_kit/table.rb

@@ -2,87 +2,279 @@
 
 module NitroKit
   class Table < Component
-    def initialize(wrapper: {}, **attrs)
-      super(attrs)
-      @wrapper = wrapper
+    ALIGNMENTS = %i[left center right].freeze
+    DEFAULT_ALIGNMENT = :left
+    SCOPES = %i[col row].freeze
+    DIRECTIONS = %i[asc desc].freeze
+    SORT_ICONS = { asc: "arrow-up", desc: "arrow-down", none: "chevrons-up-down" }.freeze
+    Section = Data.define(:content, :html, :aria, :data, :css_class)
+    Caption = Data.define(:text, :content, :html, :aria, :data, :css_class)
+
+    # Table renders in two phases. `caption`, `thead`, and `tbody` only collect
+    # declarations, so the component owns caption → head → body order regardless
+    # of caller order. `tr`, `th`, and `td` run inside a collected block and
+    # render immediately, which is why their validation raises before the cell
+    # it describes is emitted rather than after the table is complete.
+    def initialize(
+      sort: nil,
+      direction: nil,
+      id: nil,
+      html: {},
+      aria: {},
+      data: {},
+      table_html: {},
+      table_aria: {},
+      table_data: {},
+      desperately_need_a_class: nil
+    )
+      @sort = sort.nil? ? nil : normalize_sort_key(sort, name: "sort")
+      @direction = direction.nil? ? nil : validate_choice!(:direction, direction.to_sym, DIRECTIONS)
+      unless @sort.nil? == @direction.nil?
+        raise ArgumentError, "Table sort: and direction: must both be set or both be nil"
+      end
+
+      super(
+        component: :table,
+        attributes: { id:, data: { sort: @sort, direction: @direction }.compact }.compact,
+        html:,
+        aria:,
+        data:,
+        desperately_need_a_class:
+      )
+
+      @table_attributes = slot_attributes(
+        :element,
+        html: table_html,
+        aria: table_aria,
+        data: table_data
+      )
+      @caption = nil
+      @head = nil
+      @bodies = []
+      @sort_keys = []
     end
 
-    attr_reader :wrapper
+    attr_reader :sort, :direction
 
     def view_template
-      div(**mattr(wrapper, class: "w-full overflow-x-scroll")) do
-        table(
-          **mattr(
-            attrs,
-            class: "w-full caption-bottom text-sm divide-y"
-          )
-        ) do
-          yield
+      @collecting_sections = true
+      yield self if block_given?
+      @collecting_sections = false
+
+      div(**root_attributes) do
+        table(**@table_attributes) do
+          render_caption if @caption
+          render_section(:head, @head, :html_thead) if @head
+          @bodies.each { |body| render_section(:body, body, :html_tbody) }
         end
       end
+    ensure
+      @collecting_sections = false
     end
 
+    alias :html_caption :caption
     alias :html_thead :thead
     alias :html_tbody :tbody
     alias :html_tr :tr
     alias :html_th :th
     alias :html_td :td
 
-    def thead(**attrs)
-      builder do
-        html_thead(**attrs) { yield }
-      end
+    def caption(text = nil, html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      ensure_collecting_sections!(:caption)
+      raise ArgumentError, "Table accepts at most one caption" if @caption
+      raise ArgumentError, "Table caption accepts text or a block, not both" if !text.nil? && block
+      validate_content_text!("Table caption", text) unless block
+
+      @caption = Caption.new(
+        text:,
+        content: block,
+        html:,
+        aria:,
+        data:,
+        css_class: desperately_need_a_class
+      )
+      nil
     end
 
-    def tbody(**attrs)
-      builder do
-        html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
-      end
+    def thead(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      ensure_collecting_sections!(:thead)
+      raise ArgumentError, "Table accepts at most one thead" if @head
+      raise ArgumentError, "Table thead requires a block" unless block
+
+      @head = Section.new(content: block, html:, aria:, data:, css_class: desperately_need_a_class)
+      nil
     end
 
-    def tr(**attrs)
-      builder do
-        html_tr(**mattr(attrs, class: "border-b")) { yield }
+    def tbody(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      ensure_collecting_sections!(:tbody)
+      raise ArgumentError, "Table tbody requires a block" unless block
+
+      @bodies << Section.new(content: block, html:, aria:, data:, css_class: desperately_need_a_class)
+      nil
+    end
+
+    def tr(html: {}, aria: {}, data: {}, desperately_need_a_class: nil, &block)
+      raise ArgumentError, "Table rows must be declared inside thead or tbody" unless @rendering_section
+      raise ArgumentError, "Table tr requires a block" unless block
+
+      html_tr(**slot_attributes(:row, html:, aria:, data:, desperately_need_a_class:)) do
+        @rendering_row = true
+        render(block)
+      ensure
+        @rendering_row = false
       end
     end
 
-    def th(text = nil, align: :left, **attrs, &block)
-      builder do
-        html_th(**mattr(attrs, class: [ header_cell_classes, cell_classes, align_classes(align), "font-medium" ])) do
+    def th(
+      text = nil,
+      align: :left,
+      scope: :col,
+      sort: nil,
+      href: nil,
+      sort_data: {},
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil,
+      &block
+    )
+      ensure_rendering_row!(:th)
+      raise ArgumentError, "Table th accepts text or a block, not both" if !text.nil? && block
+      raise ArgumentError, "Table th href: requires sort:" if sort.nil? && !href.nil?
+      alignment = validate_choice!(:align, align, ALIGNMENTS)
+      scope = validate_choice!(:scope, scope, SCOPES)
+      key = sort.nil? ? nil : declare_sort_header!(sort, href:)
+
+      html_th(
+        **slot_attributes(
+          :header,
+          attributes: {
+            scope:,
+            aria: key ? { sort: aria_sort(key) } : {},
+            data: { align: alignment_value(alignment), sort_key: key }.compact
+          },
+          html:,
+          aria:,
+          data:,
+          desperately_need_a_class:
+        )
+      ) do
+        if key
+          render_sort_link(key, text, href:, data: sort_data, &block)
+        else
           text_or_block(text, &block)
         end
       end
     end
 
-    def td(text = nil, align: nil, **attrs, &block)
-      builder do
-        html_td(**mattr(attrs, class: [ cell_classes, align_classes(align) ])) do
-          text_or_block(text, &block)
+    def td(
+      text = nil,
+      align: :left,
+      html: {},
+      aria: {},
+      data: {},
+      desperately_need_a_class: nil,
+      &block
+    )
+      ensure_rendering_row!(:td)
+      raise ArgumentError, "Table td accepts text or a block, not both" if !text.nil? && block
+      alignment = validate_choice!(:align, align, ALIGNMENTS)
+      html_td(
+        **slot_attributes(
+          :cell,
+          attributes: { data: { align: alignment_value(alignment) }.compact },
+          html:,
+          aria:,
+          data:,
+          desperately_need_a_class:
+        )
+      ) { text_or_block(text, &block) }
+    end
+
+    private
+
+    def alignment_value(alignment)
+      alignment unless alignment == DEFAULT_ALIGNMENT
+    end
+
+    def render_sort_link(key, text, href:, data:, &block)
+      a(**slot_attributes(:sort, attributes: { href: }, data:)) do
+        span(**slot_attributes(:sort_label)) do
+          block ? text_or_block(nil, &block) : plain(text || key.humanize)
         end
+        render_in_slot(
+          Icon.new(SORT_ICONS.fetch(active_sort?(key) ? direction : :none), size: :xs),
+          :sort_indicator
+        )
       end
     end
 
-    private
+    def active_sort?(key) = sort == key
+
+    def aria_sort(key)
+      return "none" unless active_sort?(key)
+
+      direction == :asc ? "ascending" : "descending"
+    end
+
+    def declare_sort_header!(key, href:)
+      key = normalize_sort_key(key, name: "th sort")
+      unless href.is_a?(String) && !href.strip.empty?
+        raise ArgumentError, "Table th sort: requires a non-blank String href:"
+      end
+      raise ArgumentError, "Table sort keys must be unique: #{key.inspect}" if @sort_keys.include?(key)
 
-    def header_cell_classes
-      ""
+      @sort_keys << key
+      key
     end
 
-    def cell_classes
-      "py-2 min-h-10 px-2"
+    def normalize_sort_key(value, name:)
+      normalized = value.to_s.strip if value.is_a?(Symbol) || value.is_a?(String)
+      return normalized if normalized.present?
+
+      raise ArgumentError, "Table #{name} must be a Symbol or non-blank String"
+    end
+
+    def render_caption
+      html_caption(
+        **slot_attributes(
+          :caption,
+          html: @caption.html,
+          aria: @caption.aria,
+          data: @caption.data,
+          desperately_need_a_class: @caption.css_class
+        )
+      ) { text_or_block(@caption.text, &@caption.content) }
     end
 
-    def align_classes(align = nil)
-      case align
-      when :left
-        "text-left"
-      when :center
-        "text-center"
-      when :right
-        "text-right"
-      else
-        nil
+    def render_section(slot, section, tag)
+      public_send(
+        tag,
+        **slot_attributes(
+          slot,
+          html: section.html,
+          aria: section.aria,
+          data: section.data,
+          desperately_need_a_class: section.css_class
+        )
+      ) do
+        @rendering_section = true
+        render(section.content)
+      ensure
+        @rendering_section = false
       end
     end
+
+    def ensure_collecting_sections!(name)
+      return if @collecting_sections
+
+      raise ArgumentError, "Table #{name} must be declared inside the render block"
+    end
+
+    def ensure_rendering_row!(name)
+      return if @rendering_row
+
+      raise ArgumentError, "Table #{name} must be declared inside tr"
+    end
   end
 end