nitro_kit 0.2.0 → 0.3.0

data/app/components/nitro_kit/field.rb

@@ -1,36 +1,43 @@
+# frozen_string_literal: true
+
 module NitroKit
   class Field < Component
-    FIELD = [
-      "flex flex-col gap-2 align-start",
-      "[&:has([data-slot='error'])_[data-slot='label']]:text-destructive",
-      "[&:has([data-slot='error'])_[data-slot='control']]:border-destructive"
-    ].freeze
-
-    DESCRIPTION = "text-sm text-muted-foreground"
-    ERROR = "text-sm text-destructive"
-
     def initialize(
-      name,
+      form = nil,
+      field_name = nil,
       as: :string,
       label: nil,
       description: nil,
       errors: nil,
       **attrs
     )
-      super(**attrs)
-
-      @name = name
+      @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 || name.to_s.humanize
+      @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(
-      :name,
       :as,
+      :form,
+      :name,
+      :id,
       :field_attrs,
       :field_label,
       :field_description,
@@ -38,54 +45,35 @@ module NitroKit
     )
 
     def view_template
-      div(**attrs, class: merge(FIELD, attrs[:class])) do
-        if !block_given?
-          default_field
-        else
+      div(**attrs) do
+        if block_given?
           yield
+        else
+          default_field
         end
       end
     end
 
-    alias :original_label :label
+    alias :html_label :label
 
     def label(text = nil, **attrs)
       text ||= field_label
 
       return unless text
 
-      render(
-        Label.new(
-          **attrs,
-          data: data_merge({slot: "label"}, attrs[:data])
-        )
-      ) do
+      render(Label.new(**mattr(attrs, for: id, data: {slot: "label"}))) do
         text
       end
     end
 
-    def description(text = nil, **attrs)
+    def description(text = nil, **attrs, &block)
       text ||= field_description
 
-      return unless text
+      return unless text || block_given?
 
-      div(
-        data: {slot: "description"},
-        class: merge(DESCRIPTION, attrs[:class])
-      ) { text }
-    end
-
-    alias :original_input :input
-
-    def input(**attrs)
-      render(
-        Input.new(
-          name:,
-          **field_attrs,
-          **attrs,
-          data: {slot: "control", **data_merge(field_attrs[:data], attrs[:data])}
-        )
-      )
+      div(**mattr(attrs, data: {slot: "description"}, class: description_class)) do
+        text_or_block(text, &block)
+      end
     end
 
     def errors(error_messages = nil, **attrs)
@@ -93,31 +81,208 @@ module NitroKit
 
       return unless error_messages&.any?
 
-      ul(
-        **attrs,
-        data: {slot: "error"},
-        class: merge([ERROR, attrs[:class]])
-      ) do |msg|
+      ul(**mattr(attrs, data: {slot: "error"}, class: error_class)) do |msg|
         error_messages.each do |msg|
           li { msg }
         end
       end
     end
 
-    def control(**override_attrs)
+    def control(**attrs)
       case as
       when :string
-        input(**override_attrs)
+        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
-      label
-      description
-      control
-      errors
+      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,13 +1,19 @@
+# frozen_string_literal: true
+
 module NitroKit
   class FieldGroup < Component
-    FIELD_GROUP_BASE = "space-y-6"
+    def initialize(**attrs)
+      super(attrs, class: base_class, data: {slot: "control"})
+    end
 
     def view_template(&block)
-      div(
-        **attrs,
-        class: merge([FIELD_GROUP_BASE, attrs[:class]]),
-        &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

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

@@ -1,16 +1,26 @@
-module NitroKit
-  INPUT = [
-    "rounded-md border bg-background border-border text-base px-3 py-2",
-    "focus:outline-none ring-ring ring-offset-2 ring-offset-background focus-visible:ring-2",
-    ""
-  ].freeze
+# frozen_string_literal: true
 
+module NitroKit
   class Input < Component
-    def view_template
-      input(
-        **attrs,
-        class: merge(INPUT, attrs[:class])
+    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", attrs[:class]])
-      ) { 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