lightning_ui_kit 0.1.1

data/app/components/lightning_ui/select_component.html.erb

@@ -0,0 +1,20 @@
+<%= tag.div data:, class:"[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3 *:data-[slot=label]:font-medium" do %>
+  <% if @label %>
+    <label data-slot="label" class="text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6">
+      <%= @label %>
+    </label>
+  <% end %>
+  <% if @description %>
+    <p data-slot="description" class="text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6">
+      <%= @description %>
+    </p>
+  <% end %>
+  <span data-slot="control" class="group relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset has-data-focus:after:ring-2 has-data-focus:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none">
+    <% if @form %>
+      <%= @form.select(@name, @options_for_select, {multiple: @multiple}, { class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100"}) %>
+    <% else %>
+      <%= select_tag(@name, @options_for_select, multiple: @multiple, class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20 data-disabled:opacity-100") %>
+    <% end %>
+    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg class="size-5 stroke-zinc-500 group-has-data-disabled:stroke-zinc-600 sm:size-4 forced-colors:stroke-[CanvasText]" viewBox="0 0 16 16" aria-hidden="true" fill="none"><path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
+  </span>
+<% end %>

data/app/components/lightning_ui/select_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class LightningUi::SelectComponent < LightningUi::BaseComponent
+  def initialize(name:, form: nil, label: nil, description: nil, disabled: false, options_for_select: [], multiple: false, **options)
+    @name = name
+    @form = form
+    @label = label
+    @multiple = multiple
+    @description = description
+    @disabled = disabled
+    @options_for_select = options_for_select
+    @options = options
+  end
+
+  def data
+    default_data = {
+      slot: "field",
+      action: "click->switch#toggle",
+      controller: "select",
+      disabled: @disabled
+    }
+
+    default_data.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui/sidebar_component.html.erb

@@ -0,0 +1 @@
+<div>Add Sidebar template here</div>

data/app/components/lightning_ui/sidebar_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class LightningUi::SidebarComponent < LightningUi::BaseComponent
+end

data/app/components/lightning_ui/skeleton_component.html.erb

@@ -0,0 +1,10 @@
+<div role="status" class="animate-pulse">
+  <% if @with_title %>
+    <h3 class="h-3 bg-gray-300 rounded-full w-48 mb-4"></h3>
+  <% end %>
+  <div class="space-y-2.5">
+    <% @lines.times do %>
+      <p class="h-2 bg-gray-300 rounded-full"></p>
+    <% end %>
+  </div>
+</div>

data/app/components/lightning_ui/skeleton_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class LightningUi::SkeletonComponent < LightningUi::BaseComponent
+  def initialize(with_title: false, lines: 3)
+    @with_title = with_title
+    @lines = lines
+  end
+end

data/app/components/lightning_ui/spinner_component.html.erb

@@ -0,0 +1,10 @@
+<svg class="animate-spin border-zinc-500"
+  xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+  viewBox="0 0 30 30" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+  d="M14.4304 0.0323927C14.0002 0.172039 13.7522 0.420298 13.6321 0.825659C13.5643 1.05258 13.5527 1.58013 13.5527 4.33426C13.5527 7.98251 13.5488 7.93596 13.9208 8.30835C14.4187 8.80487 15.5812 8.80487 16.0792 8.30835C16.4511 7.93596 16.4473 7.98251 16.4473 4.33426C16.4473 0.804324 16.4415 0.742259 16.1547 0.400903C15.9145 0.115792 15.6568 0.0207556 15.0775 0.00523939C14.8614 -0.00695113 14.6447 0.00214369 14.4304 0.0323927ZM24.4026 3.89593C24.1643 4.00648 23.7574 4.38857 21.816 6.33779C20.0316 8.12797 19.4872 8.70595 19.4 8.89602C19.3276 9.05362 19.2902 9.2251 19.2905 9.39857C19.2909 9.57205 19.3289 9.74338 19.4019 9.9007C19.5376 10.1916 19.9832 10.6494 20.2835 10.8065C20.5877 10.9655 21.0391 10.9636 21.3549 10.8026C21.6785 10.6358 26.1541 6.15547 26.3207 5.83157C26.4001 5.66482 26.4417 5.4826 26.4427 5.29788C26.4437 5.11317 26.404 4.93051 26.3265 4.7629C26.1121 4.40396 25.8092 4.10611 25.4469 3.89787C25.2865 3.81116 25.1072 3.7656 24.925 3.76526C24.7427 3.76492 24.5633 3.80982 24.4026 3.89593ZM22.2559 13.5858C21.9939 13.6581 21.7571 13.8017 21.5719 14.0009C21.3065 14.3597 21.2232 15.0889 21.3898 15.6029C21.5022 15.952 21.785 16.2352 22.1338 16.3477C22.3702 16.4253 22.7557 16.435 25.6406 16.435C28.4093 16.435 28.9189 16.4233 29.1475 16.3554C29.719 16.1848 29.998 15.7348 30 14.9842C30 14.2375 29.7152 13.7894 29.1242 13.611C28.9247 13.5509 28.2989 13.5392 25.6484 13.5431C23.8698 13.547 22.343 13.5664 22.2559 13.5858ZM20.3339 19.3811C20.0277 19.5207 19.5763 19.963 19.4194 20.2772C19.3393 20.4342 19.2957 20.6073 19.2916 20.7836C19.2876 20.9599 19.3233 21.1348 19.3961 21.2954C19.5395 21.6154 24.0422 26.1384 24.3968 26.3188C24.8986 26.5767 25.4139 26.4507 25.9332 25.9425C26.4447 25.4421 26.5803 24.899 26.3207 24.3928C26.1405 24.0379 21.6223 19.5304 21.3026 19.3869C21.1498 19.3207 20.9853 19.286 20.8188 19.285C20.6524 19.284 20.4874 19.3167 20.3339 19.3811ZM14.5059 21.342C14.2442 21.4158 14.0076 21.56 13.822 21.759C13.5546 22.1197 13.5527 22.1449 13.5527 25.6322C13.5527 28.4096 13.5643 28.9197 13.6321 29.1485C13.8026 29.7207 14.254 30 15 30C15.7459 30 16.1973 29.7207 16.3678 29.1485C16.488 28.7374 16.486 22.5018 16.364 22.143C16.3264 21.9983 16.2577 21.8636 16.1627 21.7484C16.0676 21.6331 15.9485 21.5401 15.8137 21.4758C15.6006 21.3594 15.4766 21.3303 15.1104 21.3167C14.9086 21.3046 14.706 21.313 14.5059 21.342Z"
+  fill="#9F9FA9" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+  d="M4.83402 3.86487C4.5279 4.00452 4.07647 4.44673 3.91953 4.76093C3.83948 4.918 3.79581 5.09111 3.79179 5.2674C3.78776 5.44369 3.82348 5.61861 3.89628 5.77918C4.03965 6.0992 8.54237 10.6222 8.89693 10.8026C9.39873 11.0605 9.91411 10.9344 10.4334 10.4263C10.9448 9.92589 11.0805 9.38282 10.8208 8.8766C10.6407 8.52167 6.12245 4.01421 5.80276 3.87069C5.65 3.80447 5.48545 3.76982 5.31899 3.76882C5.15252 3.76782 4.98757 3.80049 4.83402 3.86487ZM0.85443 13.6129C0.282873 13.7933 0 14.2491 0 14.9842C0.00193748 15.7348 0.280935 16.1847 0.852493 16.3554C1.08112 16.4233 1.59067 16.4349 4.35934 16.4349C7.24425 16.4349 7.62981 16.4252 7.86618 16.3477C8.03981 16.2905 8.19761 16.1934 8.32684 16.064C8.45607 15.9347 8.55313 15.7767 8.61018 15.6029C8.7768 15.0889 8.69349 14.3596 8.42805 13.9989C8.32166 13.8831 8.19656 13.7861 8.058 13.7118L7.79256 13.5644L4.4349 13.5528C1.73211 13.545 1.03268 13.5567 0.85443 13.6129ZM8.90274 19.4121C8.66443 19.5227 8.25756 19.9047 6.3162 21.854C4.53177 23.6442 3.98734 24.2221 3.90016 24.4122C3.82771 24.5698 3.79037 24.7413 3.7907 24.9148C3.79104 25.0882 3.82904 25.2596 3.90209 25.4169C4.03772 25.7078 4.48334 26.1655 4.78365 26.3226C5.08783 26.4817 5.53927 26.4797 5.85508 26.3188C6.17864 26.152 10.6542 21.6717 10.8208 21.3478C10.9002 21.181 10.9419 20.9988 10.9429 20.8141C10.9439 20.6294 10.9042 20.4467 10.8267 20.2791C10.6122 19.9201 10.3094 19.6223 9.94704 19.414C9.7867 19.3273 9.60738 19.2818 9.42513 19.2814C9.24289 19.2811 9.06341 19.326 8.90274 19.4121Z"
+  fill="#D1D5DB" />
+</svg>

data/app/components/lightning_ui/spinner_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class LightningUi::SpinnerComponent < LightningUi::BaseComponent
+end

data/app/components/lightning_ui/switch_component.html.erb

@@ -0,0 +1,38 @@
+<div
+  data-slot="field"
+  class="grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto] *:data-[slot=control]:col-start-2 *:data-[slot=control]:self-center *:data-[slot=label]:col-start-1 *:data-[slot=label]:row-start-1 *:data-[slot=label]:justify-self-start *:data-[slot=description]:col-start-1 *:data-[slot=description]:row-start-2 has-data-[slot=description]:**:data-[slot=label]:font-medium"
+  data-controller="lui-switch"
+  >
+  <% if @label %>
+    <label data-slot="label" class="text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6">
+      <%= @label %>
+    </label>
+  <% end %>
+  <% if @description %>
+    <p data-slot="description" class="text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6">
+      <%= @description %>
+    </p>
+  <% end %>
+  <%= tag.button(
+    class: "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-changing:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ] bg-zinc-200 ring-1 ring-black/5 ring-inset   data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) ) ) focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500 data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)  ) data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5  [--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] ]  [--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]",
+    aria: { checked: @enabled },
+    role: "switch",
+    type: "button",
+    tabindex: 0,
+    data:
+  ) do %>
+    <span
+      aria-hidden="true"
+      class="pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5 translate-x-0 transition duration-200 ease-in-out border border-transparent bg-white ring-1 shadow-sm ring-black/5 group-data-checked:bg-(--switch) group-data-checked:shadow-(--switch-shadow) group-data-checked:ring-(--switch-ring) group-data-checked:translate-x-4 sm:group-data-checked:translate-x-3 group-data-checked:group-data-disabled:bg-white group-data-checked:group-data-disabled:shadow-sm group-data-checked:group-data-disabled:ring-black/5">
+    </span>
+    <% if @form %>
+      <%= @form.hidden_field(@name, value: @enabled, data: { lui_switch_target: "field" }) %>
+    <% else %>
+      <%= hidden_field_tag(
+        @name,
+        @enabled,
+        data: { lui_switch_target: "field" }
+      ) %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/lightning_ui/switch_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+class LightningUi::SwitchComponent < LightningUi::BaseComponent
+  def initialize(name:, form: nil, label: nil, description: nil, enabled: false, disabled: false, **options)
+    @name = name
+    @form = form
+    @label = label
+    @description = description
+    @enabled = enabled
+    @disabled = disabled
+    @options = options
+  end
+
+  def data
+    default_data.merge(@options[:data] || {})
+  end
+
+  def default_data
+    {
+      slot: "control",
+      action: "click->lui-switch#toggle"
+    }.tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+      if @enabled
+        data[:checked] = "true"
+      end
+    end
+  end
+end

data/app/components/lightning_ui/table/action_component.rb

@@ -0,0 +1,9 @@
+class LightningUi::Table::ActionComponent < LightningUi::BaseComponent
+  def initialize(&block)
+    @block = block
+  end
+
+  def call(row)
+    @block.call(row)
+  end
+end

data/app/components/lightning_ui/table/column_component.rb

@@ -0,0 +1,12 @@
+class LightningUi::Table::ColumnComponent < LightningUi::BaseComponent
+  attr_reader :title
+
+  def initialize(title, &block)
+    @title = title
+    @block = block
+  end
+
+  def call(row)
+    @block.call(row)
+  end
+end

data/app/components/lightning_ui/table_component.html.erb

@@ -0,0 +1,40 @@
+<div class="border-zinc-950/5 border rounded-lg">
+  <table class="min-w-full text-left text-sm/6 text-zinc-950 border-collapse border-inherit">
+    <thead class="text-zinc-500">
+      <tr class="">
+        <% columns.each do |column| %>
+          <th class="border-b border-b-zinc-950/10 px-4 py-2 font-medium"><%= column.title %></th>
+        <% end %>
+        <% if actions.present? %>
+          <th class="border-b border-b-zinc-950/10 px-4 py-2 font-medium"><%= @actions_title %></th>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody>
+      <% if @data.empty? %>
+        <tr>
+          <td class="p-4 text-center" colspan="<%= columns.size + (actions.present? ? 1 : 0) %>">
+            <p class="font-medium"><%= @empty_message %></p>
+          </td>
+        </tr>
+      <% else %>
+        <% @data.each do |row| %>
+          <tr class="group">
+            <% columns.each do |column| %>
+              <td class="p-4 border-b border-zinc-950/5 group-last:border-b-0">
+                <%= column.call(row) %>
+              </td>
+            <% end %>
+            <% if actions.present? %>
+              <td class="p-4 flex gap-3 border-b border-zinc-950/5 group-last:border-b-0">
+                <% actions.each do |action| %>
+                  <%= action.call(row) %>
+                <% end %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/components/lightning_ui/table_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class LightningUi::TableComponent < LightningUi::BaseComponent
+  renders_many :columns, ->(title, &block) do
+    LightningUi::Table::ColumnComponent.new(title, &block)
+  end
+  renders_many :actions, ->(&block) do
+    LightningUi::Table::ActionComponent.new(&block)
+  end
+
+  def initialize(data:, actions_title: "Actions", empty_message: "No data available")
+    @data = data
+    @actions_title = actions_title
+    @empty_message = empty_message
+  end
+end

data/app/components/lightning_ui/text_component.html.erb

@@ -0,0 +1,3 @@
+<%= tag.p(class: classes) do %>
+  <%= content %>
+<% end %>

data/app/components/lightning_ui/text_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class LightningUi::TextComponent < LightningUi::BaseComponent
+  def initialize(size: :md, **options)
+    @size = size
+    @options = options
+  end
+
+  def classes
+    merge_classes(["text-zinc-600 text-#{@size}", @options[:class]].compact.join(" "))
+  end
+end

data/app/components/lightning_ui/textarea_component.html.erb

@@ -0,0 +1,48 @@
+<%= tag.div(
+  class: "[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3 *:data-[slot=label]:font-medium",
+  data:
+) do %>
+    <% if @label %>
+      <%= tag.label(
+        @label,
+        class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
+        data: label_data
+      ) %>
+  <% end %>
+  <% if @description %>
+    <%= tag.p(
+      @description,
+      class: "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6",
+      data: description_data
+    ) %>
+  <% end %>
+  <% if @form %>
+    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+      <%= @form.text_area(
+        @name,
+        value: @value,
+        rows: @rows,
+        cols: @cols,
+        multiple: @multiple,
+        data: input_data,
+        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+        disabled: @disabled,
+        autofocus: @autofocus
+      ) %>
+    </span>
+  <% else %>
+    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+      <%= text_area_tag(
+        @name,
+        @value,
+        rows: @rows,
+        cols: @cols,
+        multiple: @multiple,
+        data: input_data,
+        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+        disabled: @disabled,
+        autofocus: @autofocus
+      ) %>
+    </span>
+  <% end %>
+<% end %>

data/app/components/lightning_ui/textarea_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class LightningUi::TextareaComponent < LightningUi::BaseComponent
+  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, description: nil, disabled: false, multiple: false, rows: 3, cols: nil, **options)
+    @name = name
+    @value = value
+    @disabled = disabled
+    @autofocus = autofocus
+    @rows = rows
+    @multiple = multiple
+    @cols = cols
+    @label = label
+    @form = form
+    @type = type
+    @description = description
+    @options = options
+  end
+
+  def data
+    @options[:data] || {}
+  end
+
+  def input_data
+    @options[:input_data] || {}
+  end
+
+  def label_data
+    {slot: "label"}.merge(@options[:label_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
+
+  def description_data
+    {slot: "description"}.merge(@options[:description_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
+end

data/app/helpers/lightning_ui/application_helper.rb

@@ -0,0 +1,7 @@
+module LightningUi
+  module ApplicationHelper
+    def lui_asset_path(file)
+      "/lightning_ui-assets/#{file}".gsub("//", "/")
+    end
+  end
+end

data/app/helpers/lightning_ui/heroicon_helper.rb

@@ -0,0 +1,14 @@
+# require "heroicon"
+
+module LightningUi
+  module HeroiconHelper
+    def heroicon(name, variant: Heroicons.configuration.variant, options: {}, path_options: {})
+      raw Heroicons::Icon.render(
+        name: name,
+        variant: variant,
+        options: options,
+        path_options: path_options
+      )
+    end
+  end
+end

data/app/javascript/lightning_ui/controllers/accordion_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["content", "item"];
+
+  connect() {
+    this.openItem(this.itemTargets[0])
+  }
+
+  toggle(e) {
+    e.preventDefault();
+
+    this.itemTargets.forEach(item => {
+      if (item.contains(e.target)) {
+        if (this.isOpen(item)) {
+          this.closeItem(item);
+        } else {
+          this.openItem(item);
+        }
+      } else {
+        this.closeItem(item);
+      }
+    });
+  }
+
+  openItem(item) {
+    const content = item.querySelector("[data-accordion-target=content]");
+    content.classList.remove("grid-rows-[0fr]");
+    content.classList.add("grid-rows-[1fr]");
+    content.classList.remove("opacity-0");
+    content.classList.add("opacity-100");
+    const arrow = item.querySelector("[data-accordion-target=arrow]");
+    arrow.classList.add("rotate-180");
+  }
+
+  closeItem(item) {
+    const content = item.querySelector("[data-accordion-target=content]");
+    content.classList.remove("grid-rows-[1fr]");
+    content.classList.add("grid-rows-[0fr]");
+    content.classList.remove("opacity-100");
+    content.classList.add("opacity-0");
+    const arrow = item.querySelector("[data-accordion-target=arrow]");
+    arrow.classList.remove("rotate-180");
+  }
+
+  isOpen(item) {
+    const content = item.querySelector("[data-accordion-target=content]");
+    return content.classList.contains("grid-rows-[1fr]");
+  }
+}
+

data/app/javascript/lightning_ui/controllers/banner_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  close() {
+    this.element.classList.remove("opacity-100");
+    this.element.classList.add("opacity-0");
+    setTimeout(() => {
+      this.element.classList.add("hidden");
+    }, 300);
+  }
+}

data/app/javascript/lightning_ui/controllers/checkbox_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["field", "control"]
+
+  toggle(event) {
+    event.preventDefault();
+
+    const checkbox = this.controlTarget
+    if (checkbox.dataset.checked) {
+      this.fieldTarget.value = false;
+      delete checkbox.dataset.checked;
+    } else {
+      this.fieldTarget.value = true;
+      checkbox.dataset.checked = true;
+    }
+  }
+}

data/app/javascript/lightning_ui/controllers/clipboard_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    if (this.hasInputTarget) {
+      this.inputTarget.disabled = true
+    }
+  }
+
+  copy(e) {
+    e.preventDefault()
+    if (!this.hasInputTarget) {
+      return
+    }
+
+    const text = this.inputTarget.innerHTML || this.inputTarget.value
+    navigator.clipboard.writeText(text)
+  }
+}

data/app/javascript/lightning_ui/controllers/dropdown_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus";
+import { useTransition } from "stimulus-use";
+
+export default class Dropdown extends Controller {
+  static targets = ["menu"];
+
+  connect() {
+    useTransition(this, {
+      element: this.menuTarget,
+    });
+  }
+
+  toggle() {
+    this.toggleTransition();
+  }
+
+  hide(event) {
+    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains("hidden")) {
+      this.leave();
+    }
+  }
+}

data/app/javascript/lightning_ui/controllers/main_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  openModal() {
+    this.findElement("lui-modal").open()
+  }
+
+  closeModal() {
+    this.findElement("lui-modal").close()
+  }
+
+  findElement(type) {
+    const targetId = this.element.dataset.target.replace("#", "")
+    const target = document.getElementById(targetId)
+    return this.application.getControllerForElementAndIdentifier(target, type)
+  }
+}

data/app/javascript/lightning_ui/controllers/modal_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dialog"]
+  static values = {
+    open: Boolean
+  }
+
+  connect() {
+    this.dialogTarget.addEventListener('click', this.onClick.bind(this))
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  disconnect() {
+    this.dialogTarget.removeEventListener('click', this.onClick.bind(this))
+  }
+
+  open() {
+    this.dialogTarget.showModal()
+  }
+
+  close() {
+    this.dialogTarget.setAttribute("closing", "")
+
+    Promise.all(
+      this.dialogTarget.getAnimations().map((animation) => animation.finished),
+    ).then(() => {
+      this.dialogTarget.removeAttribute("closing")
+      this.dialogTarget.close()
+    })
+  }
+
+  onClick(event) {
+    if (event.target === this.dialogTarget) {
+      this.dialogTarget.close()
+    }
+  }
+
+  submitForm() {
+    this.dialogTarget.querySelector("form").requestSubmit()
+  }
+}

data/app/javascript/lightning_ui/controllers/reveal_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item"]
+  static values = { initialShow: Boolean }
+
+  connect() {
+    if (!this.initialShowValue) {
+      this.itemTargets.forEach(item => {
+        item.classList.add("hidden");
+      });
+    }
+  }
+
+  toggle(event) {
+    event.preventDefault();
+
+    this.itemTargets.forEach(item => {
+      item.classList.toggle("hidden");
+    });
+  }
+}

data/app/javascript/lightning_ui/controllers/switch_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["field"]
+
+  toggle(event) {
+    event.preventDefault();
+
+    const button = event.target
+    if (button.dataset.checked) {
+      this.fieldTarget.value = false;
+      delete button.dataset.checked;
+    } else {
+      this.fieldTarget.value = true;
+      button.dataset.checked = true;
+    }
+  }
+}