nitro_kit 0.1.0 → 0.3.0

data/app/components/nitro_kit/dropdown.rb

@@ -1,110 +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
+    ITEM_VARIANTS = %i[default destructive]
 
-    ITEM = [
-      "px-3 py-1.5 rounded",
-      "font-medium truncate",
-      "cursor-default"
-    ].freeze
-
-    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: {:controller => "nk--dropdown", :"nk--dropdown-placement-value" => placement}, &block)
+    def view_template
+      div(**mattr(attrs)) do
+        yield
+      end
     end
 
-    def trigger(**attrs, &block)
-      class_list = "inline-block"
-      data = {
-        :"nk--dropdown-target" => "trigger",
-        :action => "click->nk--dropdown#toggle",
-        **attrs.fetch(:data, {})
-      }
-      div(
-        **attrs,
-        class: class_list,
-        data:,
+    def trigger(text = nil, as: NitroKit::Button, **attrs, &block)
+      trigger_attrs = mattr(
+        attrs,
         aria: {haspopup: "true", expanded: "false"},
-        &block
+        data: {nk__dropdown_target: "trigger", action: "click->nk--dropdown#toggle"}
       )
-    end
 
-    def content(**attrs, &block)
-      class_list = merge([CONTENT, attrs[:class]])
+      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
 
-      data = {
-        :"nk--dropdown-target" => "content",
-        **attrs.fetch(:data, {})
-      }
+    def content(as: :div, **attrs)
       div(
-        **attrs,
-        class: class_list,
-        data:,
-        role: "menu",
-        aria: {hidden: "true"},
-        &block
-      )
+        **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(["px-3 pt-2 pb-1.5 text-muted-foreground text-sm", 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,
-      &block
-    )
-      class_list = merge([ITEM, ITEM_VARIANTS[variant], attrs[:class]])
-
-      common_attrs = {
-        **attrs,
-        class: class_list,
+    def item(text = nil, href: nil, variant: :default, **attrs, &block)
+      common_attrs = mattr(
+        attrs,
         role: "menuitem",
-        tabindex: "-1"
-      }
+        tabindex: "-1",
+        class: [item_class, item_variant_class(variant)]
+      )
 
       if href
-        link_to(
-          href,
-          **common_attrs
-        ) {
-          text || block.call
-        }
+        link_to(href, **common_attrs) do
+          text_or_block(text, &block)
+        end
       else
-        div(**common_attrs) { text || block.call }
+        div(**common_attrs) do
+          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-foreground [&[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

data/app/components/nitro_kit/field.rb

@@ -1,37 +1,288 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Field < Component
-    FIELD_BASE = [
-      "flex flex-col gap-2 align-start",
-      "[&:has([data-slot='error'])_[data-slot='control']]:border-destructive"
-    ].freeze
-    LABEL_BASE = "text-sm font-medium"
-    DESCRIPTION_BASE = "text-sm text-muted-foreground"
-    ERROR_BASE = "text-sm text-destructive"
-    INPUT_BASE = [
-      "rounded-md border bg-background border-border text-base px-3 py-2",
-      "focus:outline-none focus:ring-2 focus:ring-primary",
-      ""
-    ].freeze
-
-    def initialize(attribute, as: :string, label: nil, description: nil, errors: nil, **attrs)
-      @attribute = attribute
-      @as = as
-      @label_text = label
-      @description_text = description
-      @errors = errors || []
-      @attrs = attrs
-    end
-
-    attr_reader :attribute, :as, :label_text, :description_text, :errors, :attrs
-
-    def view_template(&block)
-      div(**attrs, class: FIELD_BASE) do
-        label(**attrs, data: {slot: "label"}, class: LABEL_BASE) { label_text }
-        input(**attrs, data: {slot: "control"}, class: INPUT_BASE)
-        errors.each do |msg|
-          div(**attrs, data: {slot: "error"}, class: ERROR_BASE) { msg }
+    def initialize(
+      form = nil,
+      field_name = nil,
+      as: :string,
+      label: nil,
+      description: nil,
+      errors: nil,
+      **attrs
+    )
+      @form = form
+      @field_name = field_name.to_s
+      @as = as.to_sym
+
+      @name = attrs[:name] || form&.field_name(field_name)
+      @id = attrs[:id] || form&.field_id(field_name)
+
+      # select
+      @options = attrs[:options]
+
+      @field_attrs = attrs
+      @field_label = label || field_name.to_s.humanize
+      @field_description = description
+      @field_error_messages = errors
+
+      super(
+        attrs,
+        data: {as: @as},
+        class: base_class
+      )
+    end
+
+    attr_reader(
+      :as,
+      :form,
+      :name,
+      :id,
+      :field_attrs,
+      :field_label,
+      :field_description,
+      :field_error_messages
+    )
+
+    def view_template
+      div(**attrs) do
+        if block_given?
+          yield
+        else
+          default_field
+        end
+      end
+    end
+
+    alias :html_label :label
+
+    def label(text = nil, **attrs)
+      text ||= field_label
+
+      return unless text
+
+      render(Label.new(**mattr(attrs, for: id, data: {slot: "label"}))) do
+        text
+      end
+    end
+
+    def description(text = nil, **attrs, &block)
+      text ||= field_description
+
+      return unless text || block_given?
+
+      div(**mattr(attrs, data: {slot: "description"}, class: description_class)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def errors(error_messages = nil, **attrs)
+      error_messages ||= field_error_messages
+
+      return unless error_messages&.any?
+
+      ul(**mattr(attrs, data: {slot: "error"}, class: error_class)) do |msg|
+        error_messages.each do |msg|
+          li { msg }
         end
       end
     end
+
+    def control(**attrs)
+      case as
+      when :string
+        input(**attrs)
+      when
+          :button,
+          :color,
+          :date,
+          :datetime,
+          :datetime_local,
+          :email,
+          :file,
+          :hidden,
+          :month,
+          :number,
+          :password,
+          :range,
+          :search,
+          :tel,
+          :text,
+          :time,
+          :url,
+          :week
+        input(type: as, **attrs)
+      when :select
+        select(**attrs)
+      when :textarea
+        textarea(**attrs)
+      when :checkbox
+        checkbox(**attrs)
+      when :combobox
+        combobox(**attrs)
+      when :radio, :radio_button, :radio_group
+        radio_group(**attrs)
+      when :switch
+        switch(**attrs)
+      else
+        raise ArgumentError, "Invalid field type `#{as}'"
+      end
+    end
+
+    private
+
+    def default_field
+      case as
+      when :checkbox
+        control
+        label
+        description
+        errors
+      else
+        label
+        description
+        control
+        errors
+      end
+    end
+
+    def control_attrs(**attrs)
+      mattr(
+        attrs,
+        name:,
+        id:,
+        value: value_before_typecast,
+        data: {slot: "control"}
+      )
+    end
+
+    alias :html_input :input
+
+    def input(**attrs)
+      render(
+        Input.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    alias :html_select :select
+
+    def select(options: nil, **attrs)
+      render(
+        Select.new(
+          options || @options || [],
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    alias :html_textarea :textarea
+
+    def textarea(**attrs)
+      render(
+        Textarea.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    def checkbox(**attrs)
+      render(
+        Checkbox.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    def combobox(**attrs)
+      render(
+        Combobox.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    def radio_group(options: nil, **attrs)
+      render(
+        RadioButtonGroup.new(
+          options || @options || [],
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    def switch(**attrs)
+      # TODO: support use in forms
+      render(
+        Switch.new(
+          **control_attrs(
+            **field_attrs,
+            **attrs
+          )
+        )
+      )
+    end
+
+    private
+
+    def base_class
+      [
+        "grid align-start",
+        # Margins
+        "[&>[data-slot=label]+[data-slot=control]]:mt-2 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-2",
+        # When checkbox
+        "[&[data-as=checkbox]]:grid-cols-[auto_1fr] data-[as=checkbox]:gap-x-2 [&[data-as=checkbox]_[data-slot=description]]:col-start-2",
+        "[&:has([data-slot=error])_[data-slot=control]]:border-destructive"
+      ]
+    end
+
+    def description_class
+      "text-sm text-muted-foreground"
+    end
+
+    def error_class
+      "text-sm text-destructive"
+    end
+
+    def value
+      return attrs[:value] if attrs[:value]
+      return unless object = form&.object
+
+      if object.respond_to?(@field_name)
+        object.public_send(@field_name)
+      end
+    end
+
+    def value_before_typecast
+      return attrs[:value] if attrs[:value]
+      return unless object = form&.object
+
+      method_before_type_cast = @field_name + "_before_type_cast"
+
+      if object.respond_to?(method_before_type_cast)
+        object.public_send(method_before_type_cast)
+      else
+        value
+      end
+    end
   end
 end

data/app/components/nitro_kit/field_group.rb

@@ -1,14 +1,19 @@
+# frozen_string_literal: true
+
 module NitroKit
   class FieldGroup < Component
-    FIELD_GROUP_BASE = "space-y-6"
-
     def initialize(**attrs)
-      @attrs = attrs
-      @class_list = merge([FIELD_GROUP_BASE, attrs[:class]])
+      super(attrs, class: base_class, data: {slot: "control"})
     end
 
     def view_template(&block)
-      div(**attrs, class: class_list, &block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def base_class
+      "space-y-6"
     end
   end
 end

data/app/components/nitro_kit/fieldset.rb

@@ -1,16 +1,51 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Fieldset < Component
-    FIELDSET_BASE = "space-y-6"
-
-    def initialize(legend, **attrs)
+    def initialize(legend: nil, description: nil, **attrs)
       @legend = legend
-      @attrs = attrs
+      @description = description
+      super(
+        attrs,
+        class: base_class
+      )
+    end
+
+    def view_template
+      fieldset(**attrs) do
+        legend(@legend) if @legend
+        description(@description) if @description
+
+        yield
+      end
+    end
+
+    alias :html_legend :legend
+
+    def legend(text = nil, **attrs, &block)
+      html_legend(**mattr(attrs, class: legend_class)) do
+        text_or_block(text, &block)
+      end
+    end
+
+    def description(text = nil, **attrs, &block)
+      div(**mattr(attrs, class: description_class, data: {slot: "text"})) do
+        text_or_block(text, &block)
+      end
     end
 
-    attr_reader :legend, :attrs
+    private
+
+    def base_class
+      "[&>*+[data-slot=control]]:mt-6 [&>*+[data-slot=text]]:mt-1"
+    end
+
+    def legend_class
+      "text-lg font-semibold"
+    end
 
-    def view_template(&block)
-      fieldset(**attrs, class: FIELDSET_BASE, &block)
+    def description_class
+      "text-sm text-muted-foreground"
     end
   end
 end