nitro_kit 0.1.0 → 0.3.0

data/app/components/nitro_kit/form_builder.rb

@@ -1,43 +1,66 @@
+# frozen_string_literal: true
+
 module NitroKit
   class FormBuilder < ActionView::Helpers::FormBuilder
     # Fields
 
-    def fieldset(options = {}, &block)
-      content = @template.capture(&block)
-      @template.render(NitroKit::Fieldset.new(options)) { content }
+    def fieldset(**attrs, &block)
+      @template.render(NitroKit::Fieldset.new(**attrs), &block)
     end
 
-    def field_group(options = {}, &block)
-      content = @template.capture(&block)
-      @template.render(NitroKit::FieldGroup.new(**options)) { content }
-    end
+    def field(field_name, **attrs, &block)
+      label = attrs.fetch(:label, field_name.to_s.humanize)
 
-    def field(object_name, **options)
-      label = options.fetch(:label, object_name.to_s.humanize)
-      errors = object.errors.include?(object_name) ? object.errors.full_messages_for(object_name) : nil
+      errors = object && object.errors.include?(field_name) ? object.errors.full_messages_for(field_name) : nil
 
-      @template.render(NitroKit::Field.new(object_name, label:, errors:, **options))
+      @template.render(NitroKit::Field.new(self, field_name, label:, errors:, **attrs), &block)
     end
 
-    # Inputs
-
-    def label(object_name, method, content_or_options = nil, options = nil, &block)
+    def group(**attrs, &block)
+      @template.render(FieldGroup.new(**attrs), &block)
     end
 
-    def checkbox(method, options = {})
-      @template.checkbox(@object_name, method, objectify_options(options), label: options[:label])
-    end
+    # Inputs
+
+    %i[
+      checkbox
+      color_field
+      date_field
+      datetime_field
+      datetime_local_field
+      email_field
+      file_field
+      hidden_field
+      month_field
+      number_field
+      password_field
+      phone_field
+      radio_button
+      range_field
+      search_field
+      telephone_field
+      text_area
+      text_field
+      time_field
+      url_field
+      week_field
+    ]
+      .each do |method|
+        define_method(method) do |*args, **attrs, &block|
+          @template.send("nk_#{method}", *args, **attrs, &block)
+        end
+      end
 
-    alias_method :check_box, :checkbox
+    # Buttons
 
-    def submit(value = "Save changes", **options)
+    def submit(value = "Save changes", **attrs)
       content = value || @template.capture(&block)
-      @template.render(NitroKit::Button.new(variant: :primary, type: :submit, **options)) { content }
+      @template.render(NitroKit::Button.new(variant: :primary, type: :submit, **attrs)) { content }
     end
 
-    def button(value = "Save changes", **options)
+    def button(value = "Save changes", **attrs)
       content = value || @template.capture(&block)
-      @template.render(NitroKit::Button.new(**options)) { content }
+      @template.render(NitroKit::Button.new(**attrs)) { content }
     end
   end
 end

data/app/components/nitro_kit/icon.rb

@@ -1,23 +1,44 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Icon < Component
     include Phlex::Rails::Helpers::ContentTag
     include LucideRails::RailsHelper
 
-    SIZE = {
-      sm: "size-4",
-      base: "size-5",
-    }
-
-    def initialize(name:, size: :base, **attrs)
+    def initialize(name, size: :md, **attrs)
       @name = name
       @size = size
-      @attrs = attrs
+
+      super(
+        attrs,
+        class: size_class,
+        stroke_width: 1.5
+      )
     end
 
     attr_reader :name, :size
 
     def view_template
-      lucide_icon(name, **attrs, class: merge([SIZE[size], attrs[:class]]))
+      lucide_icon(name, **dasherized_attrs)
+    end
+
+    private
+
+    def size_class
+      case size
+      when :sm
+        "size-4"
+      when :md
+        "size-5"
+      when :lg
+        "size-7"
+      else
+        raise ArgumentError, "Unknown size `#{size}'"
+      end
+    end
+
+    def dasherized_attrs
+      attrs.transform_keys { |k| k.to_s.dasherize }
     end
   end
 end

data/app/components/nitro_kit/input.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Input < Component
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: base_class
+      )
+    end
+
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def base_class
+      [
+        "block rounded-md border bg-background border-border text-base px-3 py-2 h-10",
+        # Focus
+        "focus:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2"
+      ]
+    end
+  end
+end

data/app/components/nitro_kit/label.rb

@@ -1,10 +1,23 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Label < Component
-    def view_template
-      label(
-        **attrs,
-        class: merge(["text-sm font-medium select-none", class_list])
-      ) { yield }
+    def initialize(text = nil, **attrs)
+      @text = text
+
+      super(
+        attrs,
+        class: "text-sm font-medium select-none",
+        data: {slot: "label"}
+      )
+    end
+
+    attr_reader :text
+
+    def view_template(&block)
+      label(**attrs) do
+        text_or_block(text, &block)
+      end
     end
   end
 end

data/app/components/nitro_kit/pagination.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Pagination < Component
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: merge_class(nav_class, attrs[:class]),
+        aria: {label: "Pagination"}
+      )
+    end
+
+    def view_template
+      nav(**attrs) do
+        yield
+      end
+    end
+
+    def prev(text = nil, **attrs, &block)
+      page_link(**mattr(attrs, aria: {label: "Previous page"})) do
+        if text || block_given?
+          text_or_block(text, &block)
+        else
+          render(Icon.new("arrow-left"))
+          plain("Previous")
+        end
+      end
+    end
+
+    def next(text = nil, **attrs, &block)
+      page_link(**mattr(attrs, aria: {label: "Next page"})) do
+        if text || block_given?
+          text_or_block(text, &block)
+        else
+          plain("Next")
+          render(Icon.new("arrow-right"))
+        end
+      end
+    end
+
+    def page(text = nil, current: false, **attrs, &block)
+      page_link(
+        **mattr(
+          attrs,
+          aria: {
+            current: current ? "page" : nil
+          },
+          disabled: current,
+          class: [page_class, current && "bg-zinc-200/50 dark:bg-zinc-800/50"]
+        )
+      ) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def ellipsis(**attrs)
+      render(
+        Button.new(
+          **mattr(
+            attrs,
+            variant: :ghost,
+            disabled: true,
+            class: page_class
+          )
+        )
+      ) do
+        "…"
+      end
+    end
+
+    private
+
+    def page_link(text = nil, disabled: nil, **attrs)
+      a(
+        **mattr(
+          attrs,
+          role: "link",
+          aria: {disabled: disabled.to_s},
+          class: link_class
+        )
+      ) do
+        yield
+      end
+    end
+
+    def nav_class
+      "flex items-center justify-center gap-1 text-sm font-medium"
+    end
+
+    def link_class
+      "inline-flex items-center justify-center rounded-md border font-medium h-9 px-3 gap-2 border-transparent aria-disabled:text-muted-foreground [&>svg]:size-4"
+    end
+
+    def page_class
+      "w-9 px-0"
+    end
+  end
+end

data/app/components/nitro_kit/radio_button.rb

@@ -1,44 +1,45 @@
+# frozen_string_literal: true
+
 module NitroKit
   class RadioButton < Component
     include ActionView::Helpers::FormTagHelper
 
-    def initialize(name, value:, label: nil, **attrs)
-      super(**attrs)
+    def initialize(label: nil, **attrs)
+      @label = label
+      @id = id || SecureRandom.hex(4)
+
+      @class = attrs.delete(:class)
 
-      @name = name
-      @value = value
-      @label_text = label
-      @id = "#{sanitize_to_id(name)}_#{sanitize_to_id(value)}"
+      super(
+        attrs,
+        type: "radio",
+        id: @id,
+        class: [
+          "peer appearance-none size-5 shadow-sm rounded-full border text-foreground bg-background",
+          "[&[aria-checked='true']]:bg-primary",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ]
+      )
     end
 
+    alias :html_label :label
+
     attr_reader(
-      :name,
-      :value,
       :id,
-      :label_text
+      :label
     )
 
     def view_template
-      div(class: merge(["inline-flex items-center gap-2", class_list])) do
-        label(class: "grid grid-cols-1 place-items-center shrink-0") do
-          input(
-            **attrs,
-            type: "radio",
-            name:,
-            value:,
-            id:,
-            class: class_names(
-              "peer row-start-1 col-start-1",
-              "appearance-none size-5 shadow rounded-full border text-foreground bg-background",
-              "[&[aria-checked='true']]:bg-primary",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            )
-          )
+      div(class: merge_class("inline-flex items-center gap-2", @class)) do
+        html_label(class: "inline-grid *:[grid-area:1/1] place-items-center") do
+          input(**attrs)
           dot
         end
 
-        if label_text.present?
-          render(Label.new(for: id)) { label_text }
+        if label.present? || block_given?
+          render(Label.new(for: id)) do
+            label || (block_given? ? yield : nil)
+          end
         end
       end
     end
@@ -47,7 +48,7 @@ module NitroKit
 
     def dot
       svg(
-        class: class_names(
+        class: merge_class(
           "row-start-1 col-start-1",
           "size-2.5 text-primay opacity-0 pointer-events-none",
           "peer-checked:opacity-100"

data/app/components/nitro_kit/radio_button_group.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class RadioButtonGroup < Component
+    def initialize(options = nil, name: nil, value: nil, **attrs)
+      @options = options
+
+      @name = name
+      @group_value = value
+
+      super(
+        attrs,
+        name: @name,
+        class: "flex items-start flex-col gap-2"
+      )
+    end
+
+    attr_reader :name, :group_value, :options
+
+    def view_template
+      div(**attrs) do
+        if block_given?
+          yield
+        else
+          options.map { |o| item(*o) }
+        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, value_as_arg = nil, value: nil, **attrs, &block)
+      value ||= value_as_arg
+
+      render(
+        RadioButton.new(
+          **mattr(
+            attrs,
+            name: attrs.fetch(:name, name),
+            value:,
+            checked: group_value.presence == value
+          )
+        )
+      ) do
+        text_or_block(text, &block)
+      end
+    end
+  end
+end

data/app/components/nitro_kit/select.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Select < Component
+    def initialize(options = nil, value: nil, include_empty: false, prompt: nil, index: nil, **attrs)
+      @options = options
+      @value = value
+      @include_empty = include_empty
+      @prompt = prompt
+      @index = index
+
+      super(
+        attrs,
+        class: wrapper_class
+      )
+    end
+
+    attr_reader :value, :options, :include_empty, :prompts, :index
+
+    def view_template
+      span(class: wrapper_class, data: {slot: "control"}) do
+        select(**attrs, class: select_class) do
+          option if include_empty
+          options ? options.map { |o| option(*o) } : yield
+        end
+
+        chevron_icon
+      end
+    end
+
+    alias :html_option :option
+
+    def option(key_or_value = nil, value = nil, **attrs, &block)
+      value ||= key_or_value
+
+      html_option(**attrs, selected: @value == value) do
+        if block_given?
+          yield
+        else
+          key_or_value
+        end
+      end
+    end
+
+    private
+
+    def wrapper_class
+      "w-fit inline-grid *:[grid-area:1/1] group/select"
+    end
+
+    def select_class
+      [
+        "appearance-none bg-background text-foreground rounded-md border px-3 py-2 pr-10 w-full",
+        # Focus
+        "focus:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2"
+      ]
+    end
+
+    def chevron_icon
+      svg(
+        class: "size-4 self-center place-self-end mr-1.5 text-muted-foreground pointer-events-none group-hover/select:text-foreground",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: 1
+      ) do |svg|
+        svg.path(d: "m7 15 5 5 5-5")
+        svg.path(d: "m7 9 5-5 5 5")
+      end
+    end
+  end
+end

data/app/components/nitro_kit/switch.rb

@@ -1,56 +1,32 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Switch < Component
-    BUTTON = [
-      "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",
-
-      # Checked > Handle
-      "[&[aria-checked='false']_[data-slot='handle']]:bg-primary",
-      "[&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.5)-1px)] [&[aria-checked='true']_[data-slot='handle']]:bg-background"
-    ].freeze
-
-    HANDLE = [
-      "pointer-events-none inline-block rounded-full shadow ring-0",
-      "transition translate-x-[3px] duration-200 ease-in-out"
-    ].freeze
-
-    SIZE = {
-      base: "h-6 w-10 [&_[data-slot=handle]]:size-4 [&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.5)-1px)]",
-      sm: "h-5 w-8 [&_[data-slot=handle]]:size-3 [&[aria-checked='true']_[data-slot='handle']]:translate-x-[calc(theme(spacing.4)-1px)]"
-    }
-
     def initialize(
-      name,
       checked: false,
-      disabled: false,
-      size: :base,
+      size: :md,
       description: nil,
       **attrs
     )
-      super(**attrs)
-
-      @name = name
       @checked = checked
-      @disabled = disabled
       @size = size
       @description = description
+
+      super(**attrs)
     end
 
-    attr_reader :name, :checked, :disabled, :description, :size
+    attr_reader :checked, :description, :size
 
     def view_template
       button(
-        **attrs,
-        type: "button",
-        class: merge([BUTTON, SIZE[size], attrs[:class]]),
-        data: data_merge(attrs[:data], {controller: "nk--switch", action: "nk--switch#switch"}),
-        role: "switch",
-        aria: {checked: checked.to_s}
+        **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
@@ -60,7 +36,41 @@ module NitroKit
     private
 
     def handle
-      span(aria: {hidden: true}, class: HANDLE, data: {slot: "handle"})
+      span(aria: {hidden: true}, class: handle_class, data: {slot: "handle"})
+    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",
+
+        # Checked > Handle
+        "[&[aria-checked=false]_[data-slot=handle]]:bg-primary",
+        "[&[aria-checked=true]_[data-slot=handle]]:bg-background"
+      ]
+    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
     end
   end
 end

data/app/components/nitro_kit/table.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module NitroKit
+  class Table < Component
+    def initialize(**attrs)
+      super(
+        attrs,
+        class: "w-full caption-bottom text-sm divide-y"
+      )
+    end
+
+    def view_template
+      div(class: "relative w-full overflow-auto") do
+        table(**attrs) do
+          yield
+        end
+      end
+    end
+
+    alias :html_thead :thead
+    alias :html_tbody :tbody
+    alias :html_tr :tr
+    alias :html_th :th
+    alias :html_td :td
+
+    def thead(**attrs)
+      html_thead(**attrs) { yield }
+    end
+
+    def tbody(**attrs)
+      html_tbody(**mattr(attrs, class: "[&_tr:last-child]:border-0")) { yield }
+    end
+
+    def tr(**attrs)
+      html_tr(**mattr(attrs, class: "border-b")) { yield }
+    end
+
+    def th(text = nil, **attrs, &block)
+      html_th(**mattr(attrs, class: [cell_classes, "font-medium text-left"])) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def td(text = nil, **attrs, &block)
+      html_td(**mattr(attrs, class: cell_classes)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    private
+
+    def cell_classes
+      "py-3 px-2"
+    end
+  end
+end