lightning_ui_kit 0.3.2 → 0.3.4

data/app/components/lightning_ui_kit/radio_group_component.rb

@@ -0,0 +1,70 @@
+class LightningUiKit::RadioGroupComponent < LightningUiKit::BaseComponent
+  include LightningUiKit::Errors
+  include LightningUiKit::Labelable
+
+  renders_many :options, LightningUiKit::RadioGroup::OptionComponent
+
+  def initialize(name:, label: nil, form: nil, error: nil, description: nil, selected: nil, disabled: false, **options)
+    @name = name
+    @label = label
+    @form = form
+    @error = error
+    @description = description
+    @selected = selected
+    @disabled = disabled
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=label]+[data-slot=options]]:mt-3 lui:[&>[data-slot=description]+[data-slot=options]]:mt-3 lui:[&>[data-slot=options]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-radio-group"
+    }.merge(@options[:data] || {})
+  end
+
+  def label_data
+    {slot: "label"}.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def description_data
+    {slot: "description"}.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def error_data
+    {slot: "error"}.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def render_label
+    return unless render_label?
+
+    tag.label(
+      effective_label,
+      class: "lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    )
+  end
+
+  def render_hidden_field
+    if @form
+      @form.hidden_field(@name, value: @selected, data: {lui_radio_group_target: "field"})
+    else
+      helpers.hidden_field_tag(@name, @selected, data: {lui_radio_group_target: "field"})
+    end
+  end
+
+  def selected?(value)
+    @selected.to_s == value.to_s
+  end
+end

data/app/components/lightning_ui_kit/tabs/tab_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/lightning_ui_kit/tabs/tab_component.rb

@@ -0,0 +1,8 @@
+class LightningUiKit::Tabs::TabComponent < LightningUiKit::BaseComponent
+  attr_reader :title
+
+  def initialize(title:, **options)
+    @title = title
+    @options = options
+  end
+end

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

@@ -0,0 +1,30 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div role="tablist" class="<%= list_classes %>">
+    <% tabs.each_with_index do |tab, index| %>
+      <button
+        type="button"
+        role="tab"
+        id="<%= tab_id(index) %>"
+        aria-controls="<%= panel_id(index) %>"
+        aria-selected="<%= index == @default_tab %>"
+        class="<%= tab_classes %>"
+        data-lui-tabs-target="tab"
+        data-action="click->lui-tabs#select"
+      >
+        <%= tab.title %>
+      </button>
+    <% end %>
+  </div>
+  <% tabs.each_with_index do |tab, index| %>
+    <div
+      role="tabpanel"
+      id="<%= panel_id(index) %>"
+      aria-labelledby="<%= tab_id(index) %>"
+      class="lui:flex-1 lui:outline-hidden lui:hidden"
+      tabindex="0"
+      data-lui-tabs-target="panel"
+    >
+      <%= tab %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/tabs_component.rb

@@ -0,0 +1,65 @@
+class LightningUiKit::TabsComponent < LightningUiKit::BaseComponent
+  renders_many :tabs, LightningUiKit::Tabs::TabComponent
+
+  VARIANTS = %i[default line].freeze
+
+  def initialize(default_tab: 0, variant: :default, **options)
+    @default_tab = default_tab
+    @variant = VARIANTS.include?(variant) ? variant : :default
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:flex lui:flex-col lui:gap-2 lui:w-full",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-tabs",
+      lui_tabs_default_tab_value: @default_tab
+    }.merge(@options[:data] || {})
+  end
+
+  def list_classes
+    base = "lui:inline-flex lui:w-fit lui:items-center lui:justify-center lui:text-foreground-muted"
+    case @variant
+    when :line
+      "#{base} lui:gap-1 lui:rounded-none lui:bg-transparent"
+    else
+      "#{base} lui:h-9 lui:rounded-lg lui:bg-surface-tertiary lui:p-[3px]"
+    end
+  end
+
+  def tab_classes
+    base = "lui:relative lui:inline-flex lui:items-center lui:justify-center lui:gap-1.5 lui:rounded-md lui:px-3 lui:py-1 lui:text-sm lui:font-medium lui:whitespace-nowrap lui:cursor-pointer " \
+           "lui:transition-all lui:duration-150 " \
+           "lui:text-foreground-muted lui:hover:text-foreground " \
+           "lui:focus:outline-hidden lui:focus-visible:outline lui:focus-visible:outline-2 lui:focus-visible:outline-offset-[-2px] lui:focus-visible:outline-focus " \
+           "lui:disabled:pointer-events-none lui:disabled:opacity-50"
+
+    case @variant
+    when :line
+      "#{base} lui:bg-transparent lui:data-[active]:bg-transparent " \
+      "lui:data-[active]:text-foreground " \
+      "lui:after:absolute lui:after:inset-x-0 lui:after:bottom-[-5px] lui:after:h-0.5 lui:after:bg-foreground lui:after:opacity-0 lui:after:transition-opacity lui:data-[active]:after:opacity-100"
+    else
+      "#{base} lui:h-[calc(100%-1px)] lui:border lui:border-transparent " \
+      "lui:data-[active]:bg-surface lui:data-[active]:text-foreground lui:data-[active]:border-border lui:data-[active]:shadow-sm"
+    end
+  end
+
+  def line_variant?
+    @variant == :line
+  end
+
+  def tab_id(index)
+    "tab-#{object_id}-#{index}"
+  end
+
+  def panel_id(index)
+    "panel-#{object_id}-#{index}"
+  end
+end

data/app/javascript/lightning_ui_kit/controllers/radio_group_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["field", "option"];
+
+  select(event) {
+    const option = event.currentTarget;
+    if (option.dataset.disabled !== undefined) return;
+
+    this.activate(option);
+  }
+
+  keydown(event) {
+    const currentIndex = this.optionTargets.indexOf(event.currentTarget);
+    let newIndex;
+
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        newIndex = this.nextEnabledIndex(currentIndex, 1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        newIndex = this.nextEnabledIndex(currentIndex, -1);
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        this.activate(event.currentTarget);
+        return;
+      default:
+        return;
+    }
+
+    if (newIndex !== -1) {
+      this.activate(this.optionTargets[newIndex]);
+      this.optionTargets[newIndex].focus();
+    }
+  }
+
+  activate(option) {
+    const value = option.dataset.value;
+
+    this.optionTargets.forEach((opt) => {
+      if (opt === option) {
+        opt.dataset.checked = "";
+        opt.setAttribute("aria-checked", "true");
+        opt.setAttribute("tabindex", "0");
+      } else {
+        delete opt.dataset.checked;
+        opt.setAttribute("aria-checked", "false");
+        opt.setAttribute("tabindex", "-1");
+      }
+    });
+
+    this.fieldTarget.value = value;
+  }
+
+  nextEnabledIndex(currentIndex, direction) {
+    const length = this.optionTargets.length;
+    let index = currentIndex;
+
+    for (let i = 0; i < length; i++) {
+      index = (index + direction + length) % length;
+      if (this.optionTargets[index].dataset.disabled === undefined) {
+        return index;
+      }
+    }
+
+    return -1;
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/tabs_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tab", "panel"];
+  static values = {
+    defaultTab: { type: Number, default: 0 }
+  };
+
+  connect() {
+    this.activate(this.defaultTabValue);
+  }
+
+  select(event) {
+    event.preventDefault();
+    const index = this.tabTargets.indexOf(event.currentTarget);
+    if (index !== -1) {
+      this.activate(index);
+    }
+  }
+
+  activate(index) {
+    this.tabTargets.forEach((tab, i) => {
+      if (i === index) {
+        tab.dataset.active = "";
+        tab.setAttribute("aria-selected", "true");
+        tab.setAttribute("tabindex", "0");
+      } else {
+        delete tab.dataset.active;
+        tab.setAttribute("aria-selected", "false");
+        tab.setAttribute("tabindex", "-1");
+      }
+    });
+
+    this.panelTargets.forEach((panel, i) => {
+      if (i === index) {
+        panel.classList.remove("lui:hidden");
+      } else {
+        panel.classList.add("lui:hidden");
+      }
+    });
+  }
+
+  tabTargetConnected() {
+    this.tabTargets.forEach((tab) => {
+      tab.addEventListener("keydown", this.handleKeydown.bind(this));
+    });
+  }
+
+  handleKeydown(event) {
+    const currentIndex = this.tabTargets.indexOf(event.currentTarget);
+    let newIndex;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        newIndex = currentIndex === 0 ? this.tabTargets.length - 1 : currentIndex - 1;
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        newIndex = currentIndex === this.tabTargets.length - 1 ? 0 : currentIndex + 1;
+        break;
+      case "Home":
+        event.preventDefault();
+        newIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        newIndex = this.tabTargets.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    this.activate(newIndex);
+    this.tabTargets[newIndex].focus();
+  }
+}

data/app/javascript/lightning_ui_kit/index.js

@@ -10,7 +10,7 @@ window.Stimulus = application
 
 import ClipboardController from './controllers/clipboard_controller'
 import CheckboxController from './controllers/checkbox_controller'
-import BannerController from './controllers/banner_controller'
+import AlertController from './controllers/alert_controller'
 import LayoutController from './controllers/layout_controller'
 import MainController from './controllers/main_controller'
 import AccordionController from './controllers/accordion_controller'
@@ -23,11 +23,13 @@ import ToastController from './controllers/toast_controller'
 import TooltipController from './controllers/tooltip_controller'
 import ComboboxController from './controllers/combobox_controller'
 import FieldController from './controllers/field_controller'
+import TabsController from './controllers/tabs_controller'
+import RadioGroupController from './controllers/radio_group_controller'
 
 export function registerLuiControllers(application) {
   application.register(`${namespace}-clipboard`, ClipboardController)
   application.register(`${namespace}-checkbox`, CheckboxController)
-  application.register(`${namespace}-banner`, BannerController)
+  application.register(`${namespace}-alert`, AlertController)
   application.register(`${namespace}-layout`, LayoutController)
   application.register(`${namespace}-main`, MainController)
   application.register(`${namespace}-accordion`, AccordionController)
@@ -40,6 +42,8 @@ export function registerLuiControllers(application) {
   application.register(`${namespace}-tooltip`, TooltipController)
   application.register(`${namespace}-combobox`, ComboboxController)
   application.register(`${namespace}-field`, FieldController)
+  application.register(`${namespace}-tabs`, TabsController)
+  application.register(`${namespace}-radio-group`, RadioGroupController)
 }
 registerLuiControllers(application)
 

data/lib/lightning_ui_kit/builder.rb

@@ -4,6 +4,10 @@ module LightningUiKit
       @view_context = view_context
     end
 
+    def accordion(*, **, &block)
+      render(AccordionComponent.new(*, **), &block)
+    end
+
     def alert(*, **, &block)
       render(AlertComponent.new(*, **), &block)
     end
@@ -16,14 +20,14 @@ module LightningUiKit
       render(BadgeComponent.new(*, **), &block)
     end
 
-    def banner(*, **, &block)
-      render(BannerComponent.new(*, **), &block)
-    end
-
     def button(*, **, &block)
       render(ButtonComponent.new(*, **), &block)
     end
 
+    def card(*, **, &block)
+      render(CardComponent.new(*, **), &block)
+    end
+
     def checkbox(*, **, &block)
       render(CheckboxComponent.new(*, **), &block)
     end
@@ -68,6 +72,10 @@ module LightningUiKit
       render(PaginationComponent.new(*, **), &block)
     end
 
+    def radio_group(*, **, &block)
+      render(RadioGroupComponent.new(*, **), &block)
+    end
+
     def select(*, **, &block)
       render(SelectComponent.new(*, **), &block)
     end
@@ -100,6 +108,10 @@ module LightningUiKit
       render(TableComponent.new(*, **), &block)
     end
 
+    def tabs(*, **, &block)
+      render(TabsComponent.new(*, **), &block)
+    end
+
     def text(*, **, &block)
       render(TextComponent.new(*, **), &block)
     end

data/lib/lightning_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module LightningUiKit
-  VERSION = "0.3.2"
+  VERSION = "0.3.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lightning_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.3.4
 platform: ruby
 authors:
 - Alex Koval
@@ -91,17 +91,23 @@ files:
 - Rakefile
 - app/assets/stylesheets/lightning_ui_kit/application.css
 - app/assets/stylesheets/lightning_ui_kit/themes.css
+- app/assets/vendor/lightning_ui_kit.css
+- app/assets/vendor/lightning_ui_kit.js
+- app/components/lightning_ui_kit/accordion/item_component.html.erb
+- app/components/lightning_ui_kit/accordion/item_component.rb
+- app/components/lightning_ui_kit/accordion_component.html.erb
+- app/components/lightning_ui_kit/accordion_component.rb
 - app/components/lightning_ui_kit/alert_component.html.erb
 - app/components/lightning_ui_kit/alert_component.rb
 - app/components/lightning_ui_kit/avatar_component.html.erb
 - app/components/lightning_ui_kit/avatar_component.rb
 - app/components/lightning_ui_kit/badge_component.html.erb
 - app/components/lightning_ui_kit/badge_component.rb
-- app/components/lightning_ui_kit/banner_component.html.erb
-- app/components/lightning_ui_kit/banner_component.rb
 - app/components/lightning_ui_kit/base_component.rb
 - app/components/lightning_ui_kit/button_component.html.erb
 - app/components/lightning_ui_kit/button_component.rb
+- app/components/lightning_ui_kit/card_component.html.erb
+- app/components/lightning_ui_kit/card_component.rb
 - app/components/lightning_ui_kit/checkbox_component.html.erb
 - app/components/lightning_ui_kit/checkbox_component.rb
 - app/components/lightning_ui_kit/combobox_component.html.erb
@@ -129,6 +135,10 @@ files:
 - app/components/lightning_ui_kit/modal_component.rb
 - app/components/lightning_ui_kit/pagination_component.html.erb
 - app/components/lightning_ui_kit/pagination_component.rb
+- app/components/lightning_ui_kit/radio_group/option_component.html.erb
+- app/components/lightning_ui_kit/radio_group/option_component.rb
+- app/components/lightning_ui_kit/radio_group_component.html.erb
+- app/components/lightning_ui_kit/radio_group_component.rb
 - app/components/lightning_ui_kit/select_component.html.erb
 - app/components/lightning_ui_kit/select_component.rb
 - app/components/lightning_ui_kit/sidebar_component.html.erb
@@ -147,6 +157,10 @@ files:
 - app/components/lightning_ui_kit/table/column_component.rb
 - app/components/lightning_ui_kit/table_component.html.erb
 - app/components/lightning_ui_kit/table_component.rb
+- app/components/lightning_ui_kit/tabs/tab_component.html.erb
+- app/components/lightning_ui_kit/tabs/tab_component.rb
+- app/components/lightning_ui_kit/tabs_component.html.erb
+- app/components/lightning_ui_kit/tabs_component.rb
 - app/components/lightning_ui_kit/text_component.html.erb
 - app/components/lightning_ui_kit/text_component.rb
 - app/components/lightning_ui_kit/textarea_component.html.erb
@@ -159,7 +173,7 @@ files:
 - app/helpers/lightning_ui_kit/component_helper.rb
 - app/helpers/lightning_ui_kit/heroicon_helper.rb
 - app/javascript/lightning_ui_kit/controllers/accordion_controller.js
-- app/javascript/lightning_ui_kit/controllers/banner_controller.js
+- app/javascript/lightning_ui_kit/controllers/alert_controller.js
 - app/javascript/lightning_ui_kit/controllers/checkbox_controller.js
 - app/javascript/lightning_ui_kit/controllers/clipboard_controller.js
 - app/javascript/lightning_ui_kit/controllers/combobox_controller.js
@@ -169,8 +183,10 @@ files:
 - app/javascript/lightning_ui_kit/controllers/layout_controller.js
 - app/javascript/lightning_ui_kit/controllers/main_controller.js
 - app/javascript/lightning_ui_kit/controllers/modal_controller.js
+- app/javascript/lightning_ui_kit/controllers/radio_group_controller.js
 - app/javascript/lightning_ui_kit/controllers/reveal_controller.js
 - app/javascript/lightning_ui_kit/controllers/switch_controller.js
+- app/javascript/lightning_ui_kit/controllers/tabs_controller.js
 - app/javascript/lightning_ui_kit/controllers/toast_controller.js
 - app/javascript/lightning_ui_kit/controllers/tooltip_controller.js
 - app/javascript/lightning_ui_kit/index.js

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

@@ -1,17 +0,0 @@
-<%= tag.div(class: classes, data: { type: @type, controller: "lui-banner" }) do %>
-  <div data-slot="header" class="lui:flex lui:items-center lui:px-4 lui:py-3">
-    <%= heroicon(icon, variant: :outline, options: { class: "lui:shrink-0 lui:w-5 lui:h-5 lui:me-2" }) %>
-    <span class="lui:sr-only"><%= @type.to_s.humanize %></span>
-    <h3 class="lui:text-md lui:font-medium"><%= @title %></h3>
-  </div>
-
-  <div class="lui:text-sm lui:text-neutral-text lui:p-4">
-    <%= content %>
-  </div>
-
-  <% if footer.present? %>
-    <div class="lui:p-4 lui:pt-0">
-      <%= footer %>
-    </div>
-  <% end %>
-<% end %>

data/app/components/lightning_ui_kit/banner_component.rb

@@ -1,33 +0,0 @@
-class LightningUiKit::BannerComponent < LightningUiKit::BaseComponent
-  renders_one :footer
-
-  def initialize(title:, type: :info, **options)
-    @type = type
-    @title = title
-    @options = options
-  end
-
-  def classes
-    type_classes = case @type
-    when :error
-      "lui:*:data-[slot=header]:bg-destructive/80 lui:*:data-[slot=header]:text-foreground-invert"
-    else
-      "lui:*:data-[slot=header]:bg-neutral-bg"
-    end
-
-    merge_classes([default_classes, type_classes, @options[:class]].compact.join(" "))
-  end
-
-  def icon
-    case @type
-    when :error
-      "exclamation-triangle"
-    else
-      "info-circle"
-    end
-  end
-
-  def default_classes
-    "lui:border lui:border-border lui:rounded-lg lui:overflow-hidden lui:transition-opacity lui:duration-300 lui:ease-out lui:opacity-100"
-  end
-end