uikit_rails 0.1.1

data/test_app/app/components/ui/dropdown/component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Ui
+  module Dropdown
+    # Dropdown menu triggered by a button.
+    class Component < Ui::BaseComponent
+      renders_one :trigger
+      renders_many :items, types: {
+        item: { renders: ->(**attrs, &block) { Item.new(**attrs, &block) }, as: :item },
+        separator: { renders: -> { SeparatorItem.new }, as: :separator },
+        label: { renders: ->(**attrs, &block) { LabelItem.new(**attrs, &block) }, as: :label }
+      }
+
+      attr_reader :align, :html_attrs
+
+      def initialize(align: :start, **html_attrs)
+        @align = align.to_sym
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def align_class
+        "ui-dropdown__menu--#{align}"
+      end
+
+      class Item < Ui::BaseComponent
+        attr_reader :href, :html_attrs
+
+        def initialize(href: nil, **html_attrs)
+          @href = href
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          tag_name = href ? :a : :div
+          attrs = merge_attrs({ class: "ui-dropdown__item", href: href, role: "menuitem" }.compact, html_attrs)
+          content_tag(tag_name, content, **attrs)
+        end
+      end
+
+      class SeparatorItem < Ui::BaseComponent
+        def call
+          tag.div(class: "ui-dropdown__separator", role: "separator")
+        end
+      end
+
+      class LabelItem < Ui::BaseComponent
+        attr_reader :html_attrs
+
+        def initialize(**html_attrs)
+          @html_attrs = html_attrs
+          super()
+        end
+
+        def call
+          content_tag(:div, content, class: "ui-dropdown__label", **html_attrs)
+        end
+      end
+    end
+  end
+end

data/test_app/app/components/ui/dropdown/preview.yml

@@ -0,0 +1,75 @@
+description: A dropdown menu triggered by a button. Supports items, separators, and labels. Uses Stimulus for toggling with outside-click and escape-key dismissal.
+
+sections:
+  - title: Basic Dropdown
+    examples:
+      - title: Simple menu
+        code: |
+          <%= render Ui::Dropdown::Component.new do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>Options<% end %>
+            <% end %>
+            <% dropdown.with_item do %>Profile<% end %>
+            <% dropdown.with_item do %>Settings<% end %>
+            <% dropdown.with_separator %>
+            <% dropdown.with_item do %>Log out<% end %>
+          <% end %>
+
+  - title: With Labels and Links
+    examples:
+      - title: Grouped items with label
+        code: |
+          <%= render Ui::Dropdown::Component.new do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :outline) do %>My Account<% end %>
+            <% end %>
+            <% dropdown.with_label do %>Account<% end %>
+            <% dropdown.with_item(href: "/profile") do %>Profile<% end %>
+            <% dropdown.with_item(href: "/billing") do %>Billing<% end %>
+            <% dropdown.with_separator %>
+            <% dropdown.with_label do %>Team<% end %>
+            <% dropdown.with_item(href: "/team") do %>Members<% end %>
+            <% dropdown.with_item(href: "/team/settings") do %>Team Settings<% end %>
+            <% dropdown.with_separator %>
+            <% dropdown.with_item do %>Log out<% end %>
+          <% end %>
+
+  - title: Alignment
+    examples:
+      - title: Right-aligned menu
+        code: |
+          <div style="display:flex;justify-content:flex-end;">
+            <%= render Ui::Dropdown::Component.new(align: :end) do |dropdown| %>
+              <% dropdown.with_trigger do %>
+                <%= render Ui::Button::Component.new(variant: :secondary) do %>Actions &#9662;<% end %>
+              <% end %>
+              <% dropdown.with_item do %>Edit<% end %>
+              <% dropdown.with_item do %>Duplicate<% end %>
+              <% dropdown.with_separator %>
+              <% dropdown.with_item do %>Archive<% end %>
+              <% dropdown.with_item do %>Delete<% end %>
+            <% end %>
+          </div>
+
+      - title: Left-aligned menu (default)
+        code: |
+          <%= render Ui::Dropdown::Component.new(align: :start) do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new(variant: :ghost) do %>Menu &#9662;<% end %>
+            <% end %>
+            <% dropdown.with_item do %>New File<% end %>
+            <% dropdown.with_item do %>Open<% end %>
+            <% dropdown.with_item do %>Save<% end %>
+          <% end %>
+
+  - title: Custom Attributes
+    examples:
+      - title: Dropdown with custom data attributes
+        code: |
+          <%= render Ui::Dropdown::Component.new(class: "my-dropdown", data: { turbo: false }) do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= render Ui::Button::Component.new do %>More<% end %>
+            <% end %>
+            <% dropdown.with_item(data: { action: "click->my-controller#export" }) do %>Export<% end %>
+            <% dropdown.with_item(data: { action: "click->my-controller#print" }) do %>Print<% end %>
+          <% end %>

data/test_app/app/components/ui/form/USAGE

@@ -0,0 +1,51 @@
+Prerequisites (install with form or before):
+
+  rails generate uikit_rails:add input textarea select checkbox label button form
+
+Same components as standalone usage, e.g.:
+
+  <%= render Ui::Input::Component.new(...) %>
+
+Basic form:
+
+  <%= form_with model: @user, builder: Ui::Form::Builder, class: "ui-form" do |f| %>
+    <%= f.field :name %>
+    <%= f.field :email, as: :email_field, placeholder: "you@example.com" %>
+    <%= f.submit "Save" %>
+  <% end %>
+
+Field helper (label, control, errors):
+
+  <%= f.field :name %>
+  <%= f.field :email, as: :email_field %>
+  <%= f.field :password, as: :password_field %>
+  <%= f.field :bio, as: :text_area, rows: 4 %>
+  <%= f.field :role, as: :select, collection: %w[admin editor viewer] %>
+  <%= f.field :terms, as: :check_box, label: "I agree to the terms" %>
+
+With description:
+
+  <%= f.field :email, as: :email_field, description: "We'll never share your email." %>
+
+Individual helpers:
+
+  <%= f.label :email %>
+  <%= f.email_field :email, placeholder: "you@example.com" %>
+  <%= f.text_area :bio %>
+  <%= f.select :role, %w[admin editor viewer] %>
+  <%= f.check_box :terms, label: "I agree" %>
+  <%= f.submit "Save" %>
+
+Grouped select (optgroup) uses the default Rails select helper.
+
+App-wide default (ApplicationController):
+
+  class ApplicationController < ActionController::Base
+    default_form_builder Ui::Form::Builder
+  end
+
+Or in config/initializers/uikit_rails.rb:
+
+  Rails.application.config.to_prepare do
+    ApplicationController.default_form_builder Ui::Form::Builder
+  end

data/test_app/app/components/ui/form/builder.rb

@@ -0,0 +1,233 @@
+# frozen_string_literal: true
+
+module Ui
+  module Form
+    # Form builder that renders Ui::Input, Ui::Textarea, Ui::Select, Ui::Checkbox,
+    # Ui::Label, and Ui::Button via render_in so forms match standalone components.
+    class Builder < ActionView::Helpers::FormBuilder
+      TEXT_FIELD_HELPERS = {
+        text_field: "text",
+        email_field: "email",
+        password_field: "password",
+        number_field: "number",
+        phone_field: "tel",
+        url_field: "url",
+        search_field: "search",
+        date_field: "date",
+        time_field: "time",
+        datetime_local_field: "datetime-local",
+        month_field: "month",
+        week_field: "week",
+        color_field: "color"
+      }.freeze
+
+      TEXT_FIELD_HELPERS.each do |method_name, input_type|
+        define_method(method_name) do |attribute, options = {}|
+          render_input_component(attribute, input_type, options)
+        end
+      end
+
+      def text_area(attribute, options = {})
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+        value = opts.delete(:value)
+
+        id = attr_id(attribute, opts)
+        name = attr_name(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        comp = Ui::Textarea::Component.new(**html_attrs.merge(name: name, id: id))
+        comp.with_content(value.to_s)
+        render_component_instance(comp)
+      end
+
+      def select(attribute, choices = nil, options = {}, html_options = {}, &block)
+        return super if block_given?
+        return super if choices.is_a?(Hash)
+
+        html_opts = html_options.deep_dup
+        sel_opts = options.deep_dup
+        prompt = sel_opts.delete(:prompt)
+
+        merged = send(:objectify_options, html_opts.deep_dup)
+        merged.delete(:object)
+        merged[:multiple] = true if html_opts[:multiple]
+        selected = merged.delete(:value)
+
+        id = attr_id(attribute, merged)
+        name = attr_name(attribute, merged)
+        html_attrs = component_html_attrs(merged)
+        pairs = normalize_select_choices(choices)
+
+        comp = Ui::Select::Component.new(
+          options: pairs,
+          prompt: prompt,
+          selected: selected,
+          **html_attrs.merge(name: name, id: id)
+        )
+        render_component_instance(comp)
+      end
+
+      def label(attribute, text = nil, options = {}, &block)
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+        id_for = opts.delete(:for) || attr_id(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        content =
+          if block_given?
+            @template.capture(&block)
+          else
+            text || attribute.to_s.humanize
+          end
+
+        comp = Ui::Label::Component.new(for: id_for, **html_attrs)
+        comp.with_content(content)
+        render_component_instance(comp)
+      end
+
+      def check_box(attribute, options = {}, checked_value = "1", unchecked_value = "0")
+        label_text = options.delete(:label)
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+
+        id = attr_id(attribute, opts)
+        name = attr_name(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+        checked = checkbox_checked?(attribute, checked_value)
+        hidden = hidden_field(attribute, value: unchecked_value, id: nil)
+
+        box_attrs = html_attrs.merge(name: name, id: id, value: checked_value)
+        box_attrs[:checked] = true if checked
+
+        comp = Ui::Checkbox::Component.new(label: label_text, **box_attrs)
+        hidden + render_component_instance(comp)
+      end
+
+      def submit(value = nil, options = {})
+        variant = options.delete(:variant) || :default
+        size = options.delete(:size) || :md
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+        html_attrs = component_html_attrs(opts)
+        html_attrs[:name] ||= "commit"
+        html_attrs[:type] = "submit"
+        label = value.presence || default_submit_label
+
+        comp = Ui::Button::Component.new(variant: variant, size: size, tag: :button, **html_attrs)
+        comp.with_content(label)
+        render_component_instance(comp)
+      end
+
+      # Renders label, control, optional description, and model errors.
+      def field(attribute, as: :text_field, label: nil, description: nil, **options)
+        label_text = label || attribute.to_s.humanize
+        parts = []
+
+        if as == :check_box
+          options[:label] = label_text
+          parts << check_box(attribute, options)
+        else
+          parts << self.label(attribute, label_text)
+          parts << build_control(attribute, as, options)
+        end
+
+        parts << @template.content_tag(:p, description, class: "ui-form-description") if description
+        parts << error_message(attribute)
+
+        @template.content_tag(:div, parts.compact.join.html_safe, class: "ui-form-field")
+      end
+
+      private
+
+      def render_input_component(attribute, input_type, options)
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+        id = attr_id(attribute, opts)
+        name = attr_name(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        comp = Ui::Input::Component.new(**html_attrs.merge(name: name, id: id, type: input_type))
+        render_component_instance(comp)
+      end
+
+      def build_control(attribute, as, options)
+        case as
+        when :select
+          collection = options.delete(:collection) || []
+          prompt = options.delete(:prompt)
+          select(attribute, collection, { prompt: prompt }, options)
+        when :text_area
+          text_area(attribute, options)
+        else
+          send(as, attribute, options)
+        end
+      end
+
+      def error_message(attribute)
+        return unless object.respond_to?(:errors) && object.errors[attribute].any?
+
+        messages = object.errors.full_messages_for(attribute).join(", ")
+        @template.content_tag(:p, messages, class: "ui-form-error")
+      end
+
+      def render_component_instance(component)
+        component.render_in(@template)
+      end
+
+      def attr_id(attribute, opts)
+        opts[:id].presence || @template.field_id(object_name, attribute)
+      end
+
+      def attr_name(attribute, opts)
+        if opts[:multiple]
+          @template.field_name(object_name, attribute, multiple: true)
+        elsif opts[:name].present?
+          opts[:name]
+        else
+          @template.field_name(object_name, attribute)
+        end
+      end
+
+      def component_html_attrs(opts)
+        opts.except(:id, :name, :value, :type, :object, :skip_default_ids)
+      end
+
+      def normalize_select_choices(choices)
+        return [] if choices.nil?
+
+        Array(choices).map { |c| c.is_a?(Array) ? c : [c, c] }
+      end
+
+      def checkbox_checked?(attribute, checked_value)
+        return false unless object.respond_to?(attribute)
+
+        val = object.public_send(attribute)
+        case val
+        when TrueClass, FalseClass
+          val
+        when Array
+          val.map(&:to_s).include?(checked_value.to_s)
+        else
+          val.to_s == checked_value.to_s
+        end
+      end
+
+      def default_submit_label
+        unless object.respond_to?(:persisted?)
+          return I18n.t("helpers.submit.default", default: "Save")
+        end
+
+        if object.persisted?
+          I18n.t("helpers.submit.update", model: model_name_from_object, default: "Update")
+        else
+          I18n.t("helpers.submit.create", model: model_name_from_object, default: "Create")
+        end
+      end
+
+      def model_name_from_object
+        object.respond_to?(:model_name) ? object.model_name.human : ""
+      end
+    end
+  end
+end

data/test_app/app/components/ui/form/component.rb

@@ -0,0 +1,258 @@
+# frozen_string_literal: true
+
+module Ui
+  module Form
+    # Custom form builder that renders the same ViewComponents as standalone usage
+    # (Ui::Input, Ui::Textarea, Ui::Select, Ui::Checkbox, Ui::Label, Ui::Button)
+    # so forms stay visually and structurally consistent with the rest of your UI.
+    #
+    #   form_with model: @user, builder: Ui::Form::Builder, class: "ui-form" do |f|
+    #     f.field :email, as: :email_field, placeholder: "you@example.com"
+    #     f.submit "Save"
+    #   end
+    #
+    # Add these components first so the classes exist:
+    #   rails generate uikit_rails:add input textarea select checkbox label button form
+    #
+    class Builder < ActionView::Helpers::FormBuilder
+      TEXT_FIELD_HELPERS = {
+        text_field: "text",
+        email_field: "email",
+        password_field: "password",
+        number_field: "number",
+        phone_field: "tel",
+        url_field: "url",
+        search_field: "search",
+        date_field: "date",
+        time_field: "time",
+        datetime_local_field: "datetime-local",
+        month_field: "month",
+        week_field: "week",
+        color_field: "color"
+      }.freeze
+
+      TEXT_FIELD_HELPERS.each do |method_name, input_type|
+        define_method(method_name) do |attribute, options = {}|
+          render_input_component(attribute, input_type, options)
+        end
+      end
+
+      def text_area(attribute, options = {})
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+        value = opts.delete(:value)
+
+        id = attr_id(attribute, opts)
+        name = attr_name(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        comp = Ui::Textarea::Component.new(**html_attrs.merge(name: name, id: id))
+        comp.with_content(value.to_s)
+        render_component_instance(comp)
+      end
+
+      def select(attribute, choices = nil, options = {}, html_options = {}, &block)
+        return super if block_given?
+        return super if choices.is_a?(Hash) # grouped options — fall back to Rails helper
+
+        html_opts = html_options.deep_dup
+        sel_opts = options.deep_dup
+
+        prompt = sel_opts.delete(:prompt)
+
+        merged = send(:objectify_options, html_opts.deep_dup)
+        merged.delete(:object)
+        merged[:multiple] = true if html_opts[:multiple]
+        selected = merged.delete(:value)
+
+        id = attr_id(attribute, merged)
+        name = attr_name(attribute, merged)
+        html_attrs = component_html_attrs(merged)
+
+        pairs = normalize_select_choices(choices)
+
+        comp = Ui::Select::Component.new(
+          options: pairs,
+          prompt: prompt,
+          selected: selected,
+          **html_attrs.merge(name: name, id: id)
+        )
+        render_component_instance(comp)
+      end
+
+      def label(attribute, text = nil, options = {}, &block)
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+
+        id_for = opts.delete(:for) || attr_id(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        content = if block_given?
+                    @template.capture(&block)
+                  else
+                    text || attribute.to_s.humanize
+                  end
+
+        comp = Ui::Label::Component.new(for: id_for, **html_attrs)
+        comp.with_content(content)
+        render_component_instance(comp)
+      end
+
+      def check_box(attribute, options = {}, checked_value = "1", unchecked_value = "0")
+        label_text = options.delete(:label)
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+
+        id = attr_id(attribute, opts)
+        name = attr_name(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        checked = checkbox_checked?(attribute, checked_value)
+
+        hidden = hidden_field(attribute, value: unchecked_value, id: nil)
+
+        box_attrs = html_attrs.merge(name: name, id: id, value: checked_value)
+        box_attrs[:checked] = true if checked
+
+        comp = Ui::Checkbox::Component.new(label: label_text, **box_attrs)
+
+        hidden + render_component_instance(comp)
+      end
+
+      def submit(value = nil, options = {})
+        variant = options.delete(:variant) || :default
+        size = options.delete(:size) || :md
+
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+        html_attrs = component_html_attrs(opts)
+
+        html_attrs[:name] ||= "commit"
+        html_attrs[:type] = "submit"
+
+        label = value.presence || default_submit_label
+
+        comp = Ui::Button::Component.new(variant: variant, size: size, tag: :button, **html_attrs)
+        comp.with_content(label)
+        render_component_instance(comp)
+      end
+
+      # Renders a complete form field: label + control + error messages.
+      #
+      #   f.field :email, as: :email_field, placeholder: "you@example.com"
+      #   f.field :bio, as: :text_area, rows: 4
+      #   f.field :role, as: :select, collection: %w[admin editor viewer]
+      #   f.field :terms, as: :check_box, label: "I agree"
+      #
+      def field(attribute, as: :text_field, label: nil, description: nil, **options)
+        label_text = label || attribute.to_s.humanize
+        parts = []
+
+        if as == :check_box
+          options[:label] = label_text
+          parts << check_box(attribute, options)
+        else
+          parts << self.label(attribute, label_text)
+          parts << build_control(attribute, as, options)
+        end
+
+        parts << @template.content_tag(:p, description, class: "ui-form-description") if description
+        parts << error_message(attribute)
+
+        @template.content_tag(:div, parts.compact.join.html_safe, class: "ui-form-field")
+      end
+
+      private
+
+      def render_input_component(attribute, input_type, options)
+        opts = send(:objectify_options, options.deep_dup)
+        opts.delete(:object)
+
+        id = attr_id(attribute, opts)
+        name = attr_name(attribute, opts)
+        html_attrs = component_html_attrs(opts)
+
+        comp = Ui::Input::Component.new(**html_attrs.merge(name: name, id: id, type: input_type))
+        render_component_instance(comp)
+      end
+
+      def build_control(attribute, as, options)
+        case as
+        when :select
+          collection = options.delete(:collection) || []
+          prompt = options.delete(:prompt)
+          select(attribute, collection, { prompt: prompt }, options)
+        when :text_area
+          text_area(attribute, options)
+        else
+          send(as, attribute, options)
+        end
+      end
+
+      def error_message(attribute)
+        return unless object.respond_to?(:errors) && object.errors[attribute].any?
+
+        messages = object.errors.full_messages_for(attribute).join(", ")
+        @template.content_tag(:p, messages, class: "ui-form-error")
+      end
+
+      def render_component_instance(component)
+        component.render_in(@template)
+      end
+
+      def attr_id(attribute, opts)
+        opts[:id].presence || @template.field_id(object_name, attribute)
+      end
+
+      def attr_name(attribute, opts)
+        if opts[:multiple]
+          @template.field_name(object_name, attribute, multiple: true)
+        elsif opts[:name].present?
+          opts[:name]
+        else
+          @template.field_name(object_name, attribute)
+        end
+      end
+
+      def component_html_attrs(opts)
+        opts.except(:id, :name, :value, :type, :object, :skip_default_ids)
+      end
+
+      def normalize_select_choices(choices)
+        return [] if choices.nil?
+
+        Array(choices).map { |c| c.is_a?(Array) ? c : [c, c] }
+      end
+
+      def checkbox_checked?(attribute, checked_value)
+        return false unless object.respond_to?(attribute)
+
+        val = object.public_send(attribute)
+        case val
+        when TrueClass, FalseClass
+          val
+        when Array
+          val.map(&:to_s).include?(checked_value.to_s)
+        else
+          val.to_s == checked_value.to_s
+        end
+      end
+
+      def default_submit_label
+        unless object.respond_to?(:persisted?)
+          return I18n.t("helpers.submit.default", default: "Save")
+        end
+
+        if object.persisted?
+          I18n.t("helpers.submit.update", model: model_name_from_object, default: "Update")
+        else
+          I18n.t("helpers.submit.create", model: model_name_from_object, default: "Create")
+        end
+      end
+
+      def model_name_from_object
+        object.respond_to?(:model_name) ? object.model_name.human : ""
+      end
+    end
+  end
+end