aeros 0.0.1

data/app/components/aeros/application_view_component.rb

@@ -0,0 +1,75 @@
+module Aeros
+  class ApplicationViewComponent < ViewComponentContrib::Base
+    extend(Dry::Initializer)
+    include(Aeros::ApplicationHelper)
+    include(ViewComponentContrib::StyleVariants)
+
+    style_config.postprocess_with do |classes|
+      TailwindMerge::Merger.new.merge(classes.join(" "))
+    end
+
+    option(:css, optional: true)
+    def default_styles
+      [style, css].join(" ")
+    end
+
+    class << self
+      def named
+        @named ||= self.name.sub(/::Component$/, "").underscore.split("/").join("--").gsub("_", "-")
+      end
+    end
+
+    def controller_name
+      # Match JS autoload naming for components/controllers:
+      # - aeros/components/button/button_controller -> aeros--button
+      name = self.class.name
+        .sub(/^Aeros::/, "")
+        .sub(/::Component$/, "")
+        .underscore
+
+      "aeros--#{name.gsub('/', '--').gsub('_', '-')}"
+    end
+
+    def data_target_key
+      "#{controller_name}-target"
+    end
+
+    # Helper methods for Stimulus attributes
+    # These return keys suited for Rails `data:` hashes (no `data-` prefix)
+    def stimulus_controller
+      { controller: controller_name }
+    end
+
+    def stimulus_target(name)
+      { "#{controller_name}-target" => name }
+    end
+
+    def stimulus_action(event, method = nil)
+      method ||= event
+      { action: "#{event}->#{controller_name}##{method}" }
+    end
+
+    def stimulus_value(name, value)
+      { "#{controller_name}-#{name}-value" => value }
+    end
+
+    def stimulus_class(name, css_class)
+      { "#{controller_name}-#{name}-class" => css_class }
+    end
+
+    # Attribute helpers for raw tag helpers (already include `data-` prefix)
+    def stimulus_attr_target(name)
+      { "data-#{controller_name}-target" => name }
+    end
+
+    def merged_data
+      return default_data unless respond_to?(:data) && data.keys
+
+      data.merge(**default_data)
+    end
+
+    def default_data
+      { controller: controller_name }
+    end
+  end
+end

data/app/components/aeros/button/component.rb

@@ -0,0 +1,128 @@
+module Aeros::Button
+  class Component < ::Aeros::ApplicationViewComponent
+    option(:css, optional: true)
+    option(:type, optional: true)
+    option(:label, optional: true)
+    option(:method, optional: true)
+    option(:href, optional: true)
+    option(:data, default: proc { {} })
+    option(:icon, optional: true)
+    option(:variant, default: proc { :default })
+    option(:disabled, default: proc { false })
+    option(:full, default: proc { false })
+    option(:size, default: proc { nil })
+    option(:as, default: proc { :button })
+    option(:target, optional: true)
+
+    style do
+      base do
+        %w[
+          rounded-md
+          px-3.5
+          py-2.5
+          font-semibold
+          inline-flex
+          items-center
+          space-x-1
+          hover:bg-stone-500
+          focus-visible:outline
+          focus-visible:outline-2
+          focus-visible:outline-offset-2
+          focus-visible:outline-stone-600
+          cursor-pointer
+          [&>span]:truncate
+          [&>span]:flex-shrink
+          [&>svg]:flex-shrink-0
+          [&>svg]:w-4
+          [&>svg]:h-4
+          [&.loading]:opacity-50
+          [&.loading]:pointer-events-none
+          [&.loading_.icon]:hidden
+          [&.loading_.spinner]:flex
+        ]
+      end
+
+      variants do
+        variant do
+          white { "text-stone-600 bg-white hover:bg-stone-50 text-stone-800 border border-gray-200 shadow-sm !text-gray-500" }
+          default { "bg-slate-600 text-white" }
+          light { "bg-stone-50 text-stone-600 hover:bg-stone-100" }
+          outline { "bg-stone-50 text-stone-600 ring ring-1 ring-stone-400 rounded-full px-6 hover:bg-stone-100" }
+        end
+
+        disabled do
+          yes { "pointer-events-none opacity-50" }
+        end
+
+        full do
+          yes { "w-full justify-center" }
+        end
+
+        size do
+          xsmall do
+            %w[
+              px-2.5
+              py-1
+              [&>span]:text-xs
+              [&>svg]:pl-[-10px]
+              [&>svg]:flex-shrink-0
+              [&>svg]:w-3
+              [&>svg]:h-3
+              space-x-1
+            ]
+          end
+
+          small do
+            %w[
+              text-lg
+              px-2.5
+              py-1.5
+              space-x-1
+              text-sm
+              [&>svg]:pl-[-10px]
+              [&>svg]:flex-shrink-0
+              [&>svg]:w-4
+              [&>svg]:h-4
+            ]
+          end
+
+          large do
+            %w[
+              text-lg
+              px-4
+              py-3
+              space-x-2
+              [&>svg]:pl-[-10px]
+              [&>svg]:flex-shrink-0
+              [&>svg]:w-6
+              [&>svg]:h-6
+            ]
+          end
+        end
+      end
+    end
+
+    def classes
+      [
+        css,
+        style(variant:, disabled:, full:, size:)
+      ].join(" ")
+    end
+
+    erb_template <<~ERB
+      <% if href %>
+        <%= link_to(href, method:, data: merged_data, class: classes, target:) do %>
+          <%= lucide_icon(icon, class: "flex-shrink-0 icon") if icon %>
+          <%= ui("spinner", size: :sm, variant: :white, css: "spinner hidden") %>
+          <% if label %><span class="truncate flex-shrink"><%= label %></span><% end %>
+        <% end %>
+      <% else %>
+        <%= content_tag(as, data: merged_data, type: type || "button", class: classes) do %>
+          <%= lucide_icon(icon, class: "flex-shrink-0 icon") if icon %>
+          <%= ui("spinner", size: :sm,  variant: :white, css: "spinner hidden") %>
+          <% if label %><span class="truncate flex-shrink"><%= label %></span><% end %>
+        <% end %>
+      <% end %>
+    ERB
+  end
+end

data/app/components/aeros/button/controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    console.log("button connected");
+  }
+}

data/app/components/aeros/card/component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= default_styles %>">
+  <%= content %>
+</div>

data/app/components/aeros/card/component.rb

@@ -0,0 +1,7 @@
+module Aeros::Card
+  class Component < ::Aeros::ApplicationViewComponent
+    style do
+      base { "shadow-lg ring ring-stone-400/20 rounded-lg" }
+    end
+  end
+end

data/app/components/aeros/dropdown/component.html.erb

@@ -0,0 +1,26 @@
+<div class="<%= classes %>">
+  <div>
+    <%= ui("button",
+           label: label,
+           icon: "chevron-down",
+           variant: button_variant,
+           size: button_size,
+           data: { "dropdown-menu-toggle": "" }) %>
+  </div>
+
+  <div class="hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
+       role="menu"
+       aria-orientation="vertical">
+    <div class="py-1">
+      <% if groups.any? %>
+        <% groups.each do |group| %>
+          <%= group %>
+        <% end %>
+      <% else %>
+        <% options.each do |option| %>
+          <%= option %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/aeros/dropdown/component.rb

@@ -0,0 +1,66 @@
+module Aeros::Dropdown
+  class Component < ::Aeros::ApplicationViewComponent
+    option(:css, optional: true)
+    option(:label, optional: true)
+    option(:button_variant, default: proc { :white })
+    option(:button_size, default: proc { :small })
+
+    renders_many :options, "OptionComponent"
+    renders_many :groups, "GroupComponent"
+
+    class OptionComponent < ApplicationViewComponent
+      option(:value)
+      option(:label)
+      option(:href, optional: true)
+      option(:selected, default: proc { false })
+      option(:icon, optional: true)
+
+      erb_template <<~ERB
+        <% if href %>
+          <a href="<%= href %>"
+             class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 <%= 'bg-gray-50' if selected %>"
+             role="menuitem">
+            <div class="flex items-center space-x-2">
+              <%= lucide_icon(icon, class: "w-4 h-4") if icon %>
+              <span><%= label %></span>
+            </div>
+          </a>
+        <% else %>
+          <button type="button"
+                  data-value="<%= value %>"
+                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 <%= 'bg-gray-50' if selected %>"
+                  role="menuitem">
+            <div class="flex items-center space-x-2">
+              <%= lucide_icon(icon, class: "w-4 h-4") if icon %>
+              <span><%= label %></span>
+            </div>
+          </button>
+        <% end %>
+      ERB
+    end
+
+    class GroupComponent < ApplicationViewComponent
+      option(:label)
+
+      renders_many :items, "Aeros::Dropdown::Component::OptionComponent"
+
+      erb_template <<~ERB
+        <div class="py-1">
+          <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
+            <%= label %>
+          </div>
+          <% items.each do |item| %>
+            <%= item %>
+          <% end %>
+        </div>
+      ERB
+    end
+
+    def classes
+      [
+        "relative inline-block text-left",
+        css
+      ].join(" ")
+    end
+  end
+end

data/app/components/aeros/empty/component.html.erb

@@ -0,0 +1,12 @@
+<div class="p-6">
+  <div class="flex items-center justify-center flex-col border border-dashed border-stone-300 rounded-lg p-6 min-h-[300px]">
+    <div class="flex items-center justify-center flex-col space-y-4">
+      <% if title %>
+        <div class="font-bold text-xl"><%= title %></div>
+      <% end %>
+      <div>
+        <%= content %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/aeros/empty/component.rb

@@ -0,0 +1,5 @@
+module Aeros::Empty
+  class Component < ::Aeros::ApplicationViewComponent
+    renders_one(:title)
+  end
+end

data/app/components/aeros/form_builder.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+class Aeros::FormBuilder < ActionView::Helpers::FormBuilder
+  class BaseComponent < Aeros::ApplicationViewComponent
+    INPUT_BASE_CLASSES = %w[
+      block
+      w-full
+      rounded-md
+      bg-white
+      px-3
+      py-2
+      text-sm
+      text-gray-900
+      placeholder:text-gray-400
+      outline-none
+      border
+      border-gray-300
+      focus:border-indigo-500
+      focus:ring-1
+      focus:ring-indigo-500
+      shadow-sm
+    ].freeze
+
+    option(:id, optional: true)
+    option(:name)
+    option(:value, optional: true)
+    option(:disabled, default: proc { false })
+    option(:label, optional: true)
+    option(:type, optional: true)
+    option(:helper_text, optional: true)
+    option(:error_text, optional: true)
+    option(:placeholder, optional: true)
+    option(:required, default: proc { false })
+    option(:data, default: proc { {} })
+  end
+
+  def field(field_type, name, options = {}, &block)
+    klass = "Aeros::Input#{field_type.to_s.classify}::Component".constantize
+    resolved_name = resolve_name(name)
+    error_text = @object&.errors&.[](name)&.first
+
+    value = options[:value] || @object&.send(name)
+
+    merged_options = options.merge(
+      id: options[:id] || "#{@object_name}_#{name}".parameterize(separator: "_"),
+      name: resolved_name,
+      error_text:,
+      value:
+    )
+
+    @template.render(klass.new(**merged_options), &block)
+  end
+
+  def text_field(name, options = {})
+    field(:text, name, options)
+  end
+
+  def password_field(name, options = {})
+    field(:password, name, options.merge(type: "password"))
+  end
+
+  def select_field(name, options = {}, &block)
+    field(:select, name, options, &block)
+  end
+
+  private
+
+    def resolve_name(name)
+      @object_name ? "#{@object_name}[#{name}]" : name
+    end
+end

data/app/components/aeros/input_password/component.html.erb

@@ -0,0 +1,43 @@
+<%= ui("input_wrapper",
+    label: label,
+    helper_text: helper_text,
+    error_text: error_text,
+    name: name,
+    id: id,
+    disabled: disabled,
+    required: required) do %>
+  <div class="relative" data-controller="<%= controller_name %>">
+    <input
+      type="password"
+      id="<%= id %>"
+      name="<%= name %>"
+      value="<%= value %>"
+      placeholder="<%= placeholder %>"
+      autocomplete="<%= autocomplete %>"
+      class="<%= Ui::FormBuilder::BaseComponent::INPUT_BASE_CLASSES.join(' ') %> <%= show_toggle ? 'pr-10' : '' %>"
+      data-<%= controller_name %>-target="input"
+      <%= 'disabled' if disabled %>
+      <%= 'required' if required %>
+      <% if data.any? %>
+        <% data.each do |key, val| %>
+          data-<%= key.to_s.dasherize %>="<%= val %>"
+        <% end %>
+      <% end %>
+    />
+    <% if show_toggle %>
+      <button
+        type="button"
+        class="absolute inset-y-0 right-0 pr-3 flex items-center"
+        data-action="click-><%= controller_name %>#toggle"
+        tabindex="-1"
+      >
+        <span data-<%= controller_name %>-target="showIcon">
+          <%= lucide_icon("eye", class: "h-4 w-4 text-gray-400 hover:text-gray-600") %>
+        </span>
+        <span data-<%= controller_name %>-target="hideIcon" class="hidden">
+          <%= lucide_icon("eye-off", class: "h-4 w-4 text-gray-400 hover:text-gray-600") %>
+        </span>
+      </button>
+    <% end %>
+  </div>
+<% end %>

data/app/components/aeros/input_password/component.rb

@@ -0,0 +1,6 @@
+module Aeros::InputPassword
+  class Component < ::Aeros::FormBuilder::BaseComponent
+    option(:autocomplete, default: proc { "current-password" })
+    option(:show_toggle, default: proc { true })
+  end
+end

data/app/components/aeros/input_password/controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "showIcon", "hideIcon"];
+
+  toggle() {
+    if (this.inputTarget.type === "password") {
+      this.inputTarget.type = "text";
+      this.showIconTarget.classList.add("hidden");
+      this.hideIconTarget.classList.remove("hidden");
+    } else {
+      this.inputTarget.type = "password";
+      this.showIconTarget.classList.remove("hidden");
+      this.hideIconTarget.classList.add("hidden");
+    }
+  }
+}

data/app/components/aeros/input_select/component.html.erb

@@ -0,0 +1,43 @@
+<%= ui("input_wrapper",
+    label: label,
+    helper_text: helper_text,
+    error_text: error_text,
+    name: name,
+    id: id,
+    disabled: disabled,
+    required: required) do %>
+  <select
+    id="<%= id %>"
+    name="<%= name %>"
+    class="<%= Ui::FormBuilder::BaseComponent::INPUT_BASE_CLASSES.join(' ') %>"
+    <%= 'disabled' if disabled %>
+    <%= 'required' if required %>
+    <% if data.any? %>
+      <% data.each do |key, val| %>
+        data-<%= key.to_s.dasherize %>="<%= val %>"
+      <% end %>
+    <% end %>
+  >
+    <% if prompt %>
+      <option value=""><%= prompt %></option>
+    <% end %>
+
+    <% if collection && value_method && label_method %>
+      <% collection.each do |item| %>
+        <option value="<%= item.send(value_method) %>" <%= 'selected' if value == item.send(value_method).to_s %>>
+          <%= item.send(label_method) %>
+        </option>
+      <% end %>
+    <% elsif options.any? %>
+      <% options.each do |option_value, option_label| %>
+        <option value="<%= option_value %>" <%= 'selected' if value == option_value.to_s %>>
+          <%= option_label %>
+        </option>
+      <% end %>
+    <% else %>
+      <% select_options.each do |option| %>
+        <%= option %>
+      <% end %>
+    <% end %>
+  </select>
+<% end %>

data/app/components/aeros/input_select/component.rb

@@ -0,0 +1,24 @@
+module Aeros::InputSelect
+  class Component < ::Aeros::FormBuilder::BaseComponent
+    option(:prompt, optional: true)
+    option(:options, default: proc { [] })
+    option(:collection, optional: true)
+    option(:value_method, optional: true)
+    option(:label_method, optional: true)
+
+    renders_many :select_options, "OptionComponent"
+
+    class OptionComponent < ApplicationViewComponent
+      option(:value)
+      option(:label)
+      option(:selected, default: proc { false })
+      option(:disabled, default: proc { false })
+
+      erb_template <<~ERB
+        <option value="<%= value %>" <%= 'selected' if selected %> <%= 'disabled' if disabled %>>
+          <%= label %>
+        </option>
+      ERB
+    end
+  end
+end

data/app/components/aeros/input_text/component.html.erb

@@ -0,0 +1,25 @@
+<%= ui("input_wrapper",
+    label: label,
+    helper_text: helper_text,
+    error_text: error_text,
+    name: name,
+    id: id,
+    disabled: disabled,
+    required: required) do %>
+  <input
+    type="<%= type || 'text' %>"
+    id="<%= id %>"
+    name="<%= name %>"
+    value="<%= value %>"
+    placeholder="<%= placeholder %>"
+    autocomplete="<%= autocomplete %>"
+    class="<%= Ui::FormBuilder::BaseComponent::INPUT_BASE_CLASSES.join(' ') %>"
+    <%= 'disabled' if disabled %>
+    <%= 'required' if required %>
+    <% if data.any? %>
+      <% data.each do |key, val| %>
+        data-<%= key.to_s.dasherize %>="<%= val %>"
+      <% end %>
+    <% end %>
+  />
+<% end %>

data/app/components/aeros/input_text/component.rb

@@ -0,0 +1,5 @@
+module Aeros::InputText
+  class Component < ::Aeros::FormBuilder::BaseComponent
+    option(:autocomplete, optional: true)
+  end
+end

data/app/components/aeros/input_wrapper/component.html.erb

@@ -0,0 +1,20 @@
+<div class="<%= 'opacity-50 pointer-events-none' if disabled %>" data-<%= data.to_json if data.any? %>>
+  <% if label %>
+    <label for="<%= id || name %>" class="block text-sm font-medium text-gray-700 mb-1">
+      <%= label %>
+      <% if required %>
+        <span class="text-red-500">*</span>
+      <% end %>
+    </label>
+  <% end %>
+
+  <div class="relative">
+    <%= content %>
+  </div>
+
+  <% if error_text %>
+    <p class="mt-1 text-sm text-red-600"><%= error_text %></p>
+  <% elsif helper_text %>
+    <p class="mt-1 text-sm text-gray-500"><%= helper_text %></p>
+  <% end %>
+</div>

data/app/components/aeros/input_wrapper/component.rb

@@ -0,0 +1,12 @@
+module Aeros::InputWrapper
+  class Component < ::Aeros::ApplicationViewComponent
+    option(:label, optional: true)
+    option(:name)
+    option(:id, optional: true)
+    option(:helper_text, optional: true)
+    option(:error_text, optional: true)
+    option(:disabled, default: proc { false })
+    option(:required, default: proc { false })
+    option(:data, default: proc { {} })
+  end
+end

data/app/components/aeros/page/component.html.erb

@@ -0,0 +1,24 @@
+<div class="flex flex-col w-full">
+  <div class="flex items-center justify-between py-6 space-x-6">
+    <div class="w-full min-w-0 truncate">
+      <h1 class="flex items-center space-x-2 font-semibold text-3xl tracking-tight">
+        <span class="flex-shrink truncate min-w-0 max-w-2/3"><%= title %></span>
+        <% if subtitle %>
+          <span class="text-gray-500/70 flex-shrink-0"><%= subtitle %></span>
+        <% end %>
+      </h1>
+      <% if description %>
+        <p class="mt-2 text-gray-600"><%= description %></p>
+      <% end %>
+    </div>
+    <% if actions_area %>
+      <div class="flex-shrink-0">
+        <%= actions_area %>
+      </div>
+    <% end %>
+  </div>
+
+  <div class="pb-6 w-full">
+    <%= content %>
+  </div>
+</div>

data/app/components/aeros/page/component.rb

@@ -0,0 +1,9 @@
+module Aeros::Page
+  class Component < Aeros::ApplicationViewComponent
+    option(:title)
+    option(:subtitle, optional: true)
+    option(:description, optional: true)
+
+    renders_one(:actions_area)
+  end
+end