lightning_ui_kit 0.2.5 → 0.3.0

data/app/components/lightning_ui_kit/combobox_component.rb

@@ -1,205 +0,0 @@
-# frozen_string_literal: true
-
-class LightningUiKit::ComboboxComponent < LightningUiKit::BaseComponent
-  include LightningUiKit::Errors
-
-  def initialize(
-    name: nil,
-    form: nil,
-    label: nil,
-    description: nil,
-    placeholder: nil,
-    disabled: false,
-    error: nil,
-    multiple: false,
-    allow_custom: false,
-    options: [],
-    selected: nil,
-    url: nil,
-    min_chars: 0,
-    debounce: 300,
-    association: nil,
-    foreign_key: nil,
-    nested_model: nil,
-    collection: nil,
-    label_method: :to_s,
-    value_method: :id,
-    **options_hash
-  )
-    @form = form
-    @label = label
-    @description = description
-    @placeholder = placeholder
-    @disabled = disabled
-    @error = error
-    @allow_custom = allow_custom
-    @url = url
-    @min_chars = min_chars
-    @debounce = debounce
-    @options_hash = options_hash
-
-    @association = association
-    @foreign_key = foreign_key
-    @nested_model = nested_model
-    @collection = collection
-    @label_method = label_method
-    @value_method = value_method
-
-    if association_mode?
-      @name = nested_attributes_name
-      @multiple = true
-      @options = derive_options_from_collection if @collection
-      @selected = derive_selected_from_association if @form&.object
-    else
-      @name = name
-      @multiple = multiple
-      @options = options
-      @selected = selected
-    end
-  end
-
-  def classes
-    merge_classes([
-      "lui:[&>[data-slot=label]+[data-slot=control]]:mt-3",
-      "lui:[&>[data-slot=label]+[data-slot=description]]:mt-1",
-      "lui:[&>[data-slot=description]+[data-slot=control]]:mt-3",
-      "lui:[&>[data-slot=control]+[data-slot=description]]:mt-3",
-      "lui:[&>[data-slot=control]+[data-slot=error]]:mt-3",
-      "lui:*:data-[slot=label]:font-medium",
-      @options_hash[:class]
-    ].compact.join(" "))
-  end
-
-  def data
-    default_data = {
-      controller: "lui-combobox",
-      action: "click@window->lui-combobox#clickOutside"
-    }
-    default_data.merge(@options_hash[:data] || {}).merge(combobox_values)
-  end
-
-  def combobox_values
-    base = {
-      "lui-combobox-multiple-value" => @multiple,
-      "lui-combobox-allow-custom-value" => @allow_custom,
-      "lui-combobox-url-value" => @url,
-      "lui-combobox-min-chars-value" => @min_chars,
-      "lui-combobox-debounce-value" => @debounce,
-      "lui-combobox-options-value" => options_json,
-      "lui-combobox-selected-value" => selected_json
-    }
-
-    if association_mode?
-      base["lui-combobox-foreign-key-value"] = @foreign_key.to_s
-      base["lui-combobox-nested-model-value"] = @nested_model.to_s if @nested_model
-    end
-
-    base.compact
-  end
-
-  def association_mode?
-    @association.present? && @foreign_key.present?
-  end
-
-  def input_data
-    {
-      "lui-combobox-target" => "input",
-      :action => "input->lui-combobox#onInput focus->lui-combobox#onFocus keydown->lui-combobox#onKeydown"
-    }.tap do |d|
-      d[:invalid] = "true" if has_errors?
-    end
-  end
-
-  def input_classes
-    merge_classes([
-      "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg",
-      "lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)]",
-      "lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)]",
-      "lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6",
-      "lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20",
-      "lui:bg-transparent lui:focus:outline-hidden",
-      "lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500/60",
-      "lui:data-disabled:border-zinc-950/20",
-      "lui:pr-10"
-    ].join(" "))
-  end
-
-  def label_data
-    {slot: "label"}.merge(@options_hash[:label_data] || {}).tap do |data|
-      data[:disabled] = "true" if @disabled
-    end
-  end
-
-  def description_data
-    {slot: "description"}.merge(@options_hash[:description_data] || {}).tap do |data|
-      data[:disabled] = "true" if @disabled
-    end
-  end
-
-  def error_data
-    {slot: "error"}.merge(@options_hash[:error_data] || {}).tap do |data|
-      data[:disabled] = "true" if @disabled
-    end
-  end
-
-  def hidden_field_name
-    base_name = scoped_field_name
-
-    if association_mode?
-      base_name
-    elsif @multiple
-      "#{base_name}[]"
-    else
-      base_name
-    end
-  end
-
-  def scoped_field_name
-    if @form
-      "#{@form.object_name}[#{@name}]"
-    else
-      @name.to_s
-    end
-  end
-
-  private
-
-  def nested_attributes_name
-    "#{@association}_attributes"
-  end
-
-  def derive_options_from_collection
-    return [] unless @collection
-
-    @collection.map do |item|
-      {value: item.public_send(@value_method), label: item.public_send(@label_method)}
-    end
-  end
-
-  def derive_selected_from_association
-    return [] unless @form&.object&.respond_to?(@association)
-
-    @form.object.public_send(@association).map do |join_record|
-      {
-        join_id: join_record.id,
-        value: join_record.public_send(@foreign_key)
-      }
-    end
-  end
-
-  def options_json
-    @options.to_json
-  end
-
-  def selected_json
-    return [].to_json if @selected.nil?
-
-    if association_mode?
-      @selected.to_json
-    elsif @selected.is_a?(Array)
-      @selected.to_json
-    else
-      [@selected].to_json
-    end
-  end
-end

data/app/components/lightning_ui_kit/layout_component.html.erb

@@ -1,118 +0,0 @@
-<div class="lui:relative lui:isolate lui:flex lui:h-screen lui:w-full lui:bg-white lui:max-lg:flex-col lui:max-lg:h-auto lui:max-lg:min-h-screen lui:lg:bg-zinc-100 lui:overflow-hidden" data-controller="lui-layout">
-  <%# Desktop Sidebar (fixed, hidden on mobile) %>
-  <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:max-lg:hidden lui:z-10">
-    <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
-      <%# Sidebar content %>
-      <div class="lui:flex lui:flex-1 lui:flex-col lui:overflow-y-auto lui:p-4">
-        <% if header? %>
-          <div class="lui:mb-4">
-            <%= header %>
-          </div>
-        <% end %>
-        <% if sections? %>
-          <div class="lui:space-y-6">
-            <% sections.each do |section| %>
-              <%= section %>
-            <% end %>
-          </div>
-        <% end %>
-        <%= sidebar %>
-      </div>
-
-      <%# Footer at bottom of sidebar %>
-      <% if footer? %>
-        <div class="lui:border-t lui:border-zinc-950/5">
-          <%= footer %>
-        </div>
-      <% end %>
-    </nav>
-  </div>
-
-  <%# Mobile Header (hidden on desktop) %>
-  <header class="lui:flex lui:items-center lui:px-4 lui:lg:hidden">
-    <div class="lui:py-2.5">
-      <button
-        type="button"
-        aria-label="Open navigation"
-        class="lui:cursor-pointer lui:relative lui:flex lui:min-w-0 lui:items-center lui:gap-3 lui:rounded-lg lui:p-2 lui:text-left lui:text-base/6 lui:font-medium lui:text-zinc-950 lui:sm:text-sm/5 lui:hover:bg-zinc-950/5"
-        data-action="lui-layout#openSidebar"
-      >
-        <span class="lui:absolute lui:top-1/2 lui:left-1/2 lui:size-[max(100%,2.75rem)] lui:-translate-x-1/2 lui:-translate-y-1/2 [@media(pointer:fine)]:lui:hidden" aria-hidden="true"></span>
-        <svg class="lui:size-6 lui:shrink-0 lui:fill-zinc-500 lui:sm:size-5" viewBox="0 0 20 20" aria-hidden="true">
-          <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="lui:min-w-0 lui:flex-1">
-      <nav class="lui:flex lui:flex-1 lui:items-center lui:gap-4 lui:py-2.5">
-        <% if mobile_header? %>
-          <%= mobile_header %>
-        <% end %>
-      </nav>
-    </div>
-  </header>
-
-  <%# Mobile Sidebar Overlay %>
-  <div
-    class="lui:group lui:fixed lui:inset-0 lui:z-50 lui:invisible lui:data-[open]:visible"
-    data-lui-layout-target="overlay"
-  >
-    <%# Backdrop %>
-    <div
-      class="lui:fixed lui:inset-0 lui:bg-zinc-950/25 lui:opacity-0 lui:transition-opacity lui:duration-300 lui:group-data-[open]:opacity-100"
-      data-action="click->lui-layout#closeSidebar"
-    ></div>
-
-    <%# Mobile Sidebar Panel %>
-    <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:bg-white lui:-translate-x-full lui:transition-transform lui:duration-300 lui:ease-out lui:shadow-xl lui:group-data-[open]:translate-x-0">
-      <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
-        <%# Close button %>
-        <div class="lui:flex lui:items-center lui:justify-end lui:p-4">
-          <button
-            type="button"
-            aria-label="Close navigation"
-            class="lui:cursor-pointer lui:rounded-lg lui:p-2 lui:hover:bg-zinc-950/5"
-            data-action="lui-layout#closeSidebar"
-          >
-            <svg class="lui:size-6 lui:fill-zinc-500" viewBox="0 0 20 20" aria-hidden="true">
-              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-            </svg>
-          </button>
-        </div>
-
-        <%# Sidebar content %>
-        <div class="lui:flex lui:flex-1 lui:flex-col lui:overflow-y-auto lui:p-4">
-          <% if header? %>
-            <div class="lui:mb-4">
-              <%= header %>
-            </div>
-          <% end %>
-          <% if sections? %>
-            <div class="lui:space-y-6">
-              <% sections.each do |section| %>
-                <%= section %>
-              <% end %>
-            </div>
-          <% end %>
-          <%= sidebar %>
-        </div>
-
-        <%# Footer %>
-        <% if footer? %>
-          <div class="lui:border-t lui:border-zinc-950/5">
-            <%= footer %>
-          </div>
-        <% end %>
-      </nav>
-    </div>
-  </div>
-
-  <%# Main Content Area %>
-  <main class="lui:flex lui:flex-1 lui:flex-col lui:min-h-0 lui:pb-4 lui:lg:min-w-0 lui:lg:pt-4 lui:lg:pr-4 <%= main_padding_class %>">
-    <div class="lui:flex-1 lui:min-h-0 lui:p-6 lui:lg:rounded-lg lui:lg:bg-white lui:lg:p-10 lui:lg:shadow-xs lui:lg:ring-1 lui:lg:ring-zinc-950/5 lui:lg:overflow-y-auto">
-      <div class="lui:mx-auto lui:max-w-6xl">
-        <%= content %>
-      </div>
-    </div>
-  </main>
-</div>

data/app/components/lightning_ui_kit/layout_component.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-class LightningUiKit::LayoutComponent < LightningUiKit::BaseComponent
-  renders_one :sidebar
-  renders_one :header
-  renders_many :sections, LightningUiKit::SidebarSectionComponent
-  renders_one :footer
-  renders_one :mobile_header
-
-  def initialize(sidebar_width: "w-64", **options)
-    @sidebar_width = sidebar_width
-    @options = options
-  end
-
-  def sidebar_width_class
-    if @sidebar_width == "w-64"
-      "lui:lg:w-64"
-    else
-      "lui:lg:#{@sidebar_width}"
-    end
-  end
-
-  def main_padding_class
-    "lui:lg:pl-64"
-  end
-end

data/app/components/lightning_ui_kit/sidebar_link_component.html.erb

@@ -1,6 +0,0 @@
-<%= link_to @url, class: classes, data: data do %>
-  <% if @icon %>
-    <%= heroicon(@icon, options: { class: icon_classes }) %>
-  <% end %>
-  <span><%= @title %></span>
-<% end %>

data/app/components/lightning_ui_kit/sidebar_link_component.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-class LightningUiKit::SidebarLinkComponent < LightningUiKit::BaseComponent
-  def initialize(title:, url:, icon: nil, current: false, **options)
-    @title = title
-    @url = url
-    @icon = icon
-    @current = current
-    @options = options
-  end
-
-  def classes
-    base_classes = "lui:flex lui:items-center lui:gap-3 lui:rounded-lg lui:px-3 lui:py-2 lui:text-sm lui:transition-colors"
-
-    if @current
-      merge_classes([base_classes, "lui:bg-zinc-950/5 lui:text-zinc-950 lui:font-semibold", @options[:class]].compact.join(" "))
-    else
-      merge_classes([base_classes, "lui:text-zinc-600 lui:hover:bg-zinc-950/5 lui:hover:text-zinc-950", @options[:class]].compact.join(" "))
-    end
-  end
-
-  def icon_classes
-    if @current
-      "lui:size-5 lui:shrink-0 lui:text-zinc-600"
-    else
-      "lui:size-5 lui:shrink-0 lui:text-zinc-400"
-    end
-  end
-
-  def data
-    @options[:data] || {}
-  end
-end

data/app/components/lightning_ui_kit/sidebar_section_component.html.erb

@@ -1,8 +0,0 @@
-<div class="<%= classes %>">
-  <% if @title %>
-    <h3 class="<%= title_classes %>"><%= @title %></h3>
-  <% end %>
-  <% links.each do |link| %>
-    <%= link %>
-  <% end %>
-</div>

data/app/components/lightning_ui_kit/sidebar_section_component.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-class LightningUiKit::SidebarSectionComponent < LightningUiKit::BaseComponent
-  renders_many :links, LightningUiKit::SidebarLinkComponent
-
-  def initialize(title: nil, **options)
-    @title = title
-    @options = options
-  end
-
-  def classes
-    merge_classes(["lui:space-y-1", @options[:class]].compact.join(" "))
-  end
-
-  def title_classes
-    "lui:px-3 lui:py-2 lui:text-xs lui:font-medium lui:text-zinc-400 lui:uppercase lui:tracking-wider"
-  end
-end

data/app/components/lightning_ui_kit/tooltip_component.html.erb

@@ -1,15 +0,0 @@
-<%= tag.div(
-  data: data.merge({
-    "lui-tooltip-active-value" => @active,
-    "lui-tooltip-position-value" => @position
-  }),
-  class: "lui:inline-block") do %>
-  <%= content %>
-
-  <%= tag.div(data: { "lui-tooltip-target" => "template" }, class: "lui:hidden") do %>
-    <%= tag.div( class: "lui:absolute lui:z-50 lui:px-3 lui:py-2 lui:text-sm lui:font-medium lui:text-white lui:bg-zinc-800 lui:rounded-lg lui:shadow-sm lui:opacity-0 lui:transition-opacity lui:duration-200 lui:ease-in-out") do %>
-      <%= @text %>
-      <%= tag.div( class: "tooltip-arrow lui:absolute lui:w-2 lui:h-2 lui:bg-zinc-800 lui:transform lui:rotate-45", data: { "tooltip-arrow" => "true" }) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/components/lightning_ui_kit/tooltip_component.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-class LightningUiKit::TooltipComponent < LightningUiKit::BaseComponent
-  POSITION_OPTIONS = [:top, :bottom, :left, :right]
-  DEFAULT_POSITION = :bottom
-
-  def initialize(text: nil, position: DEFAULT_POSITION, active: true, **options)
-    @text = text
-    @position = position || DEFAULT_POSITION
-    @active = active
-    @options = options
-  end
-
-  def classes
-    merge_classes(["lui:w-full lui:flex lui:justify-center lui:fixed lui:bottom-5", @options[:class]].compact.join(" "))
-  end
-
-  def data
-    default_data = {
-      controller: "lui-tooltip",
-      action: "mouseenter->lui-tooltip#show mouseleave->lui-tooltip#hide focus->lui-tooltip#show blur->lui-tooltip#hide"
-    }
-
-    default_data.merge(@options[:data] || {})
-  end
-end