lightning_ui_kit 0.2.3 → 0.2.5

data/app/components/lightning_ui_kit/sidebar_link_component.rb

@@ -0,0 +1,33 @@
+# 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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,18 @@
+# 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/textarea_component.html.erb

@@ -2,15 +2,9 @@
   class: "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",
-  data:
+  data: data
 ) do %>
-  <% if @label %>
-    <%= tag.label(
-      @label,
-      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
-      data: label_data
-    ) %>
-  <% end %>
+  <%= render_label %>
   <% if @description %>
     <%= tag.p(
       @description,
@@ -18,35 +12,9 @@
       data: description_data
     ) %>
   <% end %>
-  <% if @form %>
-    <span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
-      <%= @form.text_area(
-        @name,
-        value: @value,
-        rows: @rows,
-        cols: @cols,
-        multiple: @multiple,
-        data: input_data,
-        class: "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:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20",
-        disabled: @disabled,
-        autofocus: @autofocus
-      ) %>
-    </span>
-  <% else %>
-    <span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
-      <%= text_area_tag(
-        @name,
-        @value,
-        rows: @rows,
-        cols: @cols,
-        multiple: @multiple,
-        data: input_data,
-        class: "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:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20",
-        disabled: @disabled,
-        autofocus: @autofocus
-      ) %>
-    </span>
-  <% end %>
+  <span data-slot="control" class="<%= control_classes %>">
+    <%= render_textarea %>
+  </span>
   <% if has_errors? %>
     <%= tag.p(
       error_messages,

data/app/components/lightning_ui_kit/textarea_component.rb

@@ -20,38 +20,71 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
   end
 
   def data
-    @options[:data] || {}
+    {controller: "lui-field"}.merge(@options[:data] || {})
   end
 
   def input_data
-    (@options[:input_data] || {}).tap do |data|
-      if has_errors?
-        data[:invalid] = "true"
-      end
+    {lui_field_target: "field"}.merge(@options[:input_data] || {}).dup.tap do |data|
+      data[:invalid] = "true" if has_errors?
     end
   end
 
   def label_data
-    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "label"}.merge(@options[:label_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
 
   def description_data
-    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "description"}.merge(@options[:description_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
 
   def error_data
-    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
-      if @disabled
-        data[:disabled] = "true"
-      end
+    {slot: "error"}.merge(@options[:error_data] || {}).dup.tap do |data|
+      data[:disabled] = "true" if @disabled
     end
   end
+
+  def label_html_options
+    {
+      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    }
+  end
+
+  def render_label
+    return unless @label
+
+    if @form
+      @form.label(@name, @label, **label_html_options)
+    else
+      helpers.label_tag(@name, @label, **label_html_options)
+    end
+  end
+
+  def textarea_html_options
+    {
+      rows: @rows,
+      cols: @cols,
+      multiple: @multiple,
+      data: input_data,
+      class: "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 lui:data-disabled:border-zinc-950/20",
+      disabled: @disabled,
+      autofocus: @autofocus
+    }
+  end
+
+  def render_textarea
+    if @form
+      @form.text_area(@name, **textarea_html_options)
+    else
+      helpers.text_area_tag(@name, @value, **textarea_html_options)
+    end
+  end
+
+  def control_classes
+    "lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10"
+  end
 end

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

@@ -0,0 +1,15 @@
+<%= 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

@@ -0,0 +1,26 @@
+# 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