uikit_rails 0.1.1

data/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/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/lib/uikit_rails/templates/components/form/form.css

@@ -0,0 +1,48 @@
+/* ============================================
+ * UikitRails — Form
+ *
+ * Form layout, field groups, description, and error text.
+ * ============================================ */
+
+.ui-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ui-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.ui-form-description {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-muted-foreground);
+  margin: 0;
+}
+
+.ui-form-error {
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-destructive);
+  margin: 0;
+}
+
+.ui-form-field .ui-input:has(~ .ui-form-error),
+.ui-form-field .ui-textarea:has(~ .ui-form-error),
+.ui-form-field .ui-select:has(~ .ui-form-error) {
+  border-color: var(--ui-destructive);
+}
+
+.ui-form-field .ui-input:has(~ .ui-form-error):focus,
+.ui-form-field .ui-textarea:has(~ .ui-form-error):focus,
+.ui-form-field .ui-select:has(~ .ui-form-error):focus {
+  outline-color: var(--ui-destructive);
+}
+
+.ui-form-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}

data/lib/uikit_rails/templates/components/form/preview.yml

@@ -0,0 +1,95 @@
+description: Form builder that renders the same Ui::Input, Ui::Textarea, Ui::Select, Ui::Checkbox, Ui::Label, and Ui::Button components as standalone render calls. Styleguide previews use form_with with scope and GET for simplicity.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Text fields
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :name %>
+              <%= f.text_field :name, placeholder: "Your name" %>
+            </div>
+            <div class="ui-form-field">
+              <%= f.label :email %>
+              <%= f.email_field :email, placeholder: "you@example.com" %>
+            </div>
+            <div class="ui-form-field">
+              <%= f.label :password %>
+              <%= f.password_field :password, placeholder: "••••••••" %>
+            </div>
+          <% end %>
+
+      - title: Textarea
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :bio %>
+              <%= f.text_area :bio, placeholder: "Tell us about yourself...", rows: 3 %>
+            </div>
+          <% end %>
+
+      - title: Select
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :role %>
+              <%= f.select :role, %w[Admin Editor Viewer] %>
+            </div>
+          <% end %>
+
+      - title: Checkbox
+        code: |
+          <%= form_with url: "#", scope: :settings, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <%= f.check_box :terms, label: "I agree to the terms and conditions" %>
+            <%= f.check_box :newsletter, label: "Subscribe to newsletter" %>
+          <% end %>
+
+  - title: Submit
+    examples:
+      - title: Variants
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                data: { turbo: false } do |f| %>
+            <div style="display: flex; gap: 0.5rem;">
+              <%= f.submit "Save changes" %>
+              <%= f.submit "Delete", variant: :destructive %>
+              <%= f.submit "Cancel", variant: :outline %>
+            </div>
+          <% end %>
+
+  - title: Description
+    examples:
+      - title: Help text
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :email %>
+              <%= f.email_field :email, placeholder: "you@example.com" %>
+              <p class="ui-form-description">We'll never share your email with anyone.</p>
+            </div>
+          <% end %>
+
+  - title: Error State
+    examples:
+      - title: Inline error
+        code: |
+          <%= form_with url: "#", scope: :user, method: :get, builder: Ui::Form::Builder,
+                html: { class: "ui-form", style: "max-width: 24rem;" },
+                data: { turbo: false } do |f| %>
+            <div class="ui-form-field">
+              <%= f.label :email %>
+              <%= f.email_field :email, placeholder: "you@example.com" %>
+              <p class="ui-form-error">Email is already taken</p>
+            </div>
+          <% end %>

data/lib/uikit_rails/templates/components/input/USAGE

@@ -0,0 +1,21 @@
+Basic text input:
+
+  <%= render Ui::Input::Component.new(placeholder: "Enter text") %>
+
+With type:
+
+  <%= render Ui::Input::Component.new(type: "email", placeholder: "you@example.com") %>
+  <%= render Ui::Input::Component.new(type: "password", placeholder: "••••••••") %>
+  <%= render Ui::Input::Component.new(type: "number", min: 0, max: 100) %>
+
+With name and value:
+
+  <%= render Ui::Input::Component.new(name: "username", value: "john") %>
+
+Disabled:
+
+  <%= render Ui::Input::Component.new(placeholder: "Disabled", disabled: true) %>
+
+With custom attributes:
+
+  <%= render Ui::Input::Component.new(class: "extra", data: { turbo: false }) %>

data/lib/uikit_rails/templates/components/input/component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Ui
+  module Input
+    # Text input field with consistent styling.
+    class Component < Ui::BaseComponent
+      attr_reader :html_attrs
+
+      def initialize(**html_attrs)
+        @html_attrs = html_attrs
+        super()
+      end
+
+      def call
+        tag.input(**computed_attrs)
+      end
+
+      private
+
+      def computed_attrs
+        merge_attrs({ class: "ui-input", type: "text" }, html_attrs)
+      end
+    end
+  end
+end

data/lib/uikit_rails/templates/components/input/input.css

@@ -0,0 +1,43 @@
+/* ============================================
+ * UikitRails — Input
+ *
+ * Standard text input field.
+ * ============================================ */
+
+.ui-input {
+  display: flex;
+  width: 100%;
+  height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  line-height: 1.5;
+  color: var(--ui-foreground);
+  background-color: var(--ui-background);
+  border: 1px solid var(--ui-input);
+  border-radius: var(--ui-radius);
+  transition:
+    border-color var(--ui-transition-speed) ease,
+    box-shadow var(--ui-transition-speed) ease;
+}
+
+.ui-input::placeholder {
+  color: var(--ui-muted-foreground);
+}
+
+.ui-input:focus {
+  outline: none;
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 1px var(--ui-ring);
+}
+
+.ui-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--ui-muted);
+}
+
+.ui-input[type="file"] {
+  padding-top: 0.375rem;
+  font-size: var(--ui-font-size-xs);
+}

data/lib/uikit_rails/templates/components/input/preview.yml

@@ -0,0 +1,58 @@
+description: A styled text input field. Supports all standard HTML input attributes including type, placeholder, disabled, and name.
+
+sections:
+  - title: Basic Usage
+    examples:
+      - title: Default text input
+        code: |
+          <%= render Ui::Input::Component.new(placeholder: "Enter your name") %>
+
+      - title: With name attribute
+        code: |
+          <%= render Ui::Input::Component.new(name: "email", placeholder: "you@example.com") %>
+
+  - title: Input Types
+    examples:
+      - title: Email
+        code: |
+          <%= render Ui::Input::Component.new(type: "email", placeholder: "you@example.com") %>
+
+      - title: Password
+        code: |
+          <%= render Ui::Input::Component.new(type: "password", placeholder: "••••••••") %>
+
+      - title: Number
+        code: |
+          <%= render Ui::Input::Component.new(type: "number", placeholder: "0", min: 0, max: 100) %>
+
+      - title: Search
+        code: |
+          <%= render Ui::Input::Component.new(type: "search", placeholder: "Search...") %>
+
+      - title: File
+        code: |
+          <%= render Ui::Input::Component.new(type: "file") %>
+
+  - title: States
+    examples:
+      - title: Disabled
+        code: |
+          <%= render Ui::Input::Component.new(placeholder: "Disabled input", disabled: true) %>
+
+      - title: With value
+        code: |
+          <%= render Ui::Input::Component.new(value: "Pre-filled value") %>
+
+      - title: Required
+        code: |
+          <%= render Ui::Input::Component.new(placeholder: "Required field", required: true) %>
+
+  - title: With Custom Attributes
+    examples:
+      - title: Custom class and data attributes
+        code: |
+          <%= render Ui::Input::Component.new(
+            placeholder: "Custom",
+            class: "my-custom-class",
+            data: { controller: "input-validator" }
+          ) %>

data/lib/uikit_rails/templates/components/label/USAGE

@@ -0,0 +1,16 @@
+Basic label:
+
+  <%= render Ui::Label::Component.new do %>Email<% end %>
+
+With for attribute:
+
+  <%= render Ui::Label::Component.new(for: "email") do %>Email address<% end %>
+
+With form input:
+
+  <%= render Ui::Label::Component.new(for: "username") do %>Username<% end %>
+  <input type="text" id="username" name="username" />
+
+With custom attributes:
+
+  <%= render Ui::Label::Component.new(class: "extra", data: { required: true }) do %>Name<% end %>