keystone_ui 0.6.0

data/app/components/keystone/ui/radio_card_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class RadioCardComponent < ViewComponent::Base
+      BASE_CLASSES = "block p-4 rounded-lg border-2 cursor-pointer transition"
+      HIGHLIGHT_CLASSES = "border-surface-200 peer-checked:border-accent-500 peer-checked:bg-accent-50"
+      LABEL_CLASSES = "block font-medium text-surface-900"
+      HINT_CLASSES = "block mt-1 text-sm text-surface-500"
+
+      attr_reader :name, :value, :label, :hint
+
+      def initialize(name:, value:, label:, hint: nil, checked: false)
+        @name = name
+        @value = value
+        @label = label
+        @hint = hint
+        @checked = checked
+      end
+
+      def checked?
+        @checked
+      end
+
+      def hint?
+        !@hint.nil?
+      end
+
+      def classes
+        "#{BASE_CLASSES} #{HIGHLIGHT_CLASSES}"
+      end
+
+      def label_classes
+        LABEL_CLASSES
+      end
+
+      def hint_classes
+        HINT_CLASSES
+      end
+    end
+  end
+end

data/app/components/keystone/ui/section_component.html.erb

@@ -0,0 +1,18 @@
+<div class="<%= spacing_class %>">
+  <% if header? %>
+    <div class="<%= HEADER_CLASSES %>">
+      <div>
+        <h2 class="<%= TITLE_CLASSES %>"><%= @title %></h2>
+        <% if @subtitle %>
+          <p class="<%= SUBTITLE_CLASSES %>"><%= @subtitle %></p>
+        <% end %>
+      </div>
+      <% if @action %>
+        <a href="<%= @action[:href] %>" class="<%= action_classes %>">
+          <%= @action[:label] %>
+        </a>
+      <% end %>
+    </div>
+  <% end %>
+  <%= content %>
+</div>

data/app/components/keystone/ui/section_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class SectionComponent < ViewComponent::Base
+      SPACING_CLASSES = { sm: "mt-4", md: "mt-6", lg: "mt-8" }.freeze
+      HEADER_CLASSES = "flex items-center justify-between mb-4"
+      TITLE_CLASSES = "text-lg font-semibold text-gray-900 dark:text-white"
+      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
+      ACTION_BASE_CLASSES = "text-sm"
+
+      def initialize(title: nil, subtitle: nil, action: nil, spacing: :md)
+        @title = title
+        @subtitle = subtitle
+        @action = action
+        @spacing = spacing
+      end
+
+      def spacing_class
+        SPACING_CLASSES.fetch(@spacing)
+      end
+
+      def action_classes
+        "#{ACTION_BASE_CLASSES} text-accent-600 hover:text-accent-900 dark:text-accent-400 dark:hover:text-accent-300"
+      end
+
+      def header?
+        !@title.nil?
+      end
+    end
+  end
+end

data/app/components/keystone/ui/select_component.html.erb

@@ -0,0 +1,8 @@
+<%= tag.select(**tag_options) do %>
+  <% if include_blank %>
+    <option value=""><%= include_blank %></option>
+  <% end %>
+  <% options.each do |label, value| %>
+    <option value="<%= value %>" <%= "selected" if selected.to_s == value.to_s %>><%= label %></option>
+  <% end %>
+<% end %>

data/app/components/keystone/ui/select_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class SelectComponent < ViewComponent::Base
+      BASE_CLASSES = "block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-1 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white"
+
+      DISABLED_CLASSES = "cursor-not-allowed bg-gray-50 text-gray-500 dark:bg-zinc-800 dark:text-gray-400"
+
+      attr_reader :options, :selected, :include_blank
+
+      def initialize(name:, options: [], selected: nil, include_blank: nil, disabled: false)
+        @name = name
+        @options = options
+        @selected = selected
+        @include_blank = include_blank
+        @disabled = disabled
+      end
+
+      FOCUS_CLASSES = "focus:border-accent-500 focus:ring-accent-500 dark:focus:border-accent-400 dark:focus:ring-accent-400"
+
+      def classes
+        tokens = [ BASE_CLASSES, FOCUS_CLASSES ]
+        tokens << DISABLED_CLASSES if @disabled
+        tokens.join(" ")
+      end
+
+      def tag_options
+        opts = {
+          name: @name,
+          class: classes
+        }
+        opts[:disabled] = true if @disabled
+        opts
+      end
+    end
+  end
+end

data/app/components/keystone/ui/settings_link_component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to @href, class: link_classes do %>
+  <span class="font-medium"><%= @label %></span>
+  <%= CHEVRON_ICON.html_safe %>
+<% end %>

data/app/components/keystone/ui/settings_link_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class SettingsLinkComponent < ViewComponent::Base
+      attr_reader :label, :href
+
+      LINK_CLASSES = "flex items-center justify-between px-4 py-3 text-gray-900 dark:text-gray-100 no-underline hover:bg-gray-50 dark:hover:bg-gray-800"
+
+      CHEVRON_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+        </svg>
+      SVG
+
+      def initialize(label:, href:)
+        @label = label
+        @href = href
+      end
+
+      def link_classes
+        LINK_CLASSES
+      end
+    end
+  end
+end

data/app/components/keystone/ui/show_page_component.html.erb

@@ -0,0 +1,4 @@
+<% content_for :show_page, true %>
+<% content_for :show_page_title, @title %>
+<% content_for :show_page_back_url, @back_url %>
+<% content_for :show_page_subtitle, @subtitle if @subtitle.present? %>

data/app/components/keystone/ui/show_page_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class ShowPageComponent < ViewComponent::Base
+      DESKTOP_WRAPPER_CLASSES = "hidden md:block"
+      TITLE_CLASSES = "text-2xl font-semibold text-gray-900 dark:text-white"
+      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
+
+      def initialize(title:, back_url:, subtitle: nil)
+        @title = title
+        @back_url = back_url
+        @subtitle = subtitle
+      end
+
+      def subtitle?
+        !@subtitle.nil?
+      end
+    end
+  end
+end

data/app/components/keystone/ui/stat_card_component.html.erb

@@ -0,0 +1,22 @@
+<div class="<%= classes %>"<%= info? ? ' data-controller="stat-card-info"'.html_safe : "" %>>
+  <div class="flex items-start justify-between gap-2">
+    <p class="<%= label_classes %>"><%= label %></p>
+    <% if info? %>
+      <button type="button" class="<%= info_button_classes %>" data-action="click->stat-card-info#toggle" aria-label="Show metric details">
+        <%= info_icon.html_safe %>
+      </button>
+    <% end %>
+  </div>
+  <p class="<%= value_classes %>">
+    <%= value %><% if suffix? %><span class="<%= suffix_classes %>"> <%= suffix %></span><% end %>
+  </p>
+  <% if change? %>
+    <p class="mt-1 text-sm font-medium <%= change_classes %>"><%= change_label %></p>
+  <% end %>
+  <% if info? %>
+    <div class="<%= disclosure_classes %>" data-stat-card-info-target="panel">
+      <% if definition %><p><span class="font-medium text-gray-700 dark:text-gray-300">Captures:</span> <%= definition %></p><% end %>
+      <% if calculation %><p><span class="font-medium text-gray-700 dark:text-gray-300">Calc:</span> <%= calculation %></p><% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/keystone/ui/stat_card_component.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class StatCardComponent < ViewComponent::Base
+      CARD_CLASSES = "rounded-xl border border-gray-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+      LABEL_CLASSES = "text-sm font-medium text-gray-500 dark:text-gray-400"
+      VALUE_BASE_CLASSES = "mt-1 text-3xl font-bold"
+      SUFFIX_CLASSES = "text-lg text-gray-500 dark:text-gray-400"
+      DISCLOSURE_CLASSES = "hidden mt-4 space-y-1 border-t border-gray-200 pt-3 text-sm text-gray-600 dark:border-zinc-700 dark:text-gray-400"
+      INFO_BUTTON_CLASSES = "shrink-0 text-gray-400 transition hover:text-accent-600 dark:hover:text-accent-400"
+
+      INFO_ICON = <<~SVG.freeze
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+      SVG
+
+      VARIANT_CLASSES = {
+        neutral: "text-gray-900 dark:text-white",
+        success: "text-green-600 dark:text-green-400",
+        danger: "text-red-600 dark:text-red-400",
+        warning: "text-yellow-600 dark:text-yellow-400",
+        info: "text-accent-600 dark:text-accent-400"
+      }.freeze
+
+      attr_reader :label, :value, :suffix, :definition, :calculation, :change
+
+      def initialize(label:, value:, variant: :neutral, suffix: nil, definition: nil, calculation: nil, change: nil)
+        @label = label
+        @value = value
+        @variant = variant
+        @suffix = suffix
+        @definition = definition
+        @calculation = calculation
+        @change = change
+      end
+
+      def classes
+        CARD_CLASSES
+      end
+
+      def label_classes
+        LABEL_CLASSES
+      end
+
+      def value_classes
+        "#{VALUE_BASE_CLASSES} #{VARIANT_CLASSES.fetch(@variant)}"
+      end
+
+      def suffix_classes
+        SUFFIX_CLASSES
+      end
+
+      def suffix?
+        !@suffix.nil?
+      end
+
+      def info?
+        !@definition.nil? || !@calculation.nil?
+      end
+
+      def change?
+        !@change.nil?
+      end
+
+      def change_label
+        formatted = "#{format("%.1f", @change.abs)}%"
+        return formatted if @change.zero?
+
+        "#{@change.negative? ? "▼" : "▲"} #{formatted}"
+      end
+
+      def change_classes
+        return "text-gray-500 dark:text-gray-400" if @change.zero?
+        return "text-red-600 dark:text-red-400" if @change.negative?
+
+        "text-green-600 dark:text-green-400"
+      end
+
+      def disclosure_classes
+        DISCLOSURE_CLASSES
+      end
+
+      def info_button_classes
+        INFO_BUTTON_CLASSES
+      end
+
+      def info_icon
+        INFO_ICON
+      end
+    end
+  end
+end

data/app/components/keystone/ui/swipe_deck_component.html.erb

@@ -0,0 +1,39 @@
+<div data-controller="swipe-deck"
+     data-swipe-deck-empty-title-value="<%= @empty_title %>"
+     data-swipe-deck-empty-subtitle-value="<%= @empty_subtitle %>">
+  <% if empty? %>
+    <div class="text-center py-16" data-testid="swipe-empty">
+      <p class="text-2xl font-semibold text-gray-900 dark:text-white"><%= @empty_title %></p>
+      <% if @empty_subtitle %>
+        <p class="mt-2 text-gray-500 dark:text-gray-400"><%= @empty_subtitle %></p>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="relative h-80" data-swipe-deck-target="stack">
+      <% card_data.each do |card| %>
+        <div class="<%= CARD_CLASSES %>"
+             data-swipe-deck-target="card"
+             data-item-id="<%= item_id(card[:item], fallback_index: card[:index]) %>"
+             data-testid="swipe-card"
+             style="z-index: <%= card[:z_index] %>; transform: <%= card[:transform] %>;">
+          <%= capture(card[:item], &@item_block) %>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="flex justify-center gap-8 mt-8">
+      <button data-action="swipe-deck#skip" data-testid="skip-button"
+              class="flex items-center justify-center size-14 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-400 hover:border-red-400 hover:text-red-400 transition-colors">
+        <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+      <button data-action="swipe-deck#complete" data-testid="complete-button"
+              class="flex items-center justify-center size-14 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-400 hover:border-green-400 hover:text-green-400 transition-colors">
+        <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+        </svg>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/components/keystone/ui/swipe_deck_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class SwipeDeckComponent < ViewComponent::Base
+      CARD_CLASSES = "absolute inset-0 rounded-2xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-lg p-6 flex flex-col items-center justify-center transition-transform duration-300"
+
+      STACK_SCALE_STEP = 0.05
+      STACK_TRANSLATE_STEP = 8
+
+      def initialize(items:, empty_title: "All done!", empty_subtitle: nil)
+        @items = items
+        @empty_title = empty_title
+        @empty_subtitle = empty_subtitle
+        @item_block = nil
+      end
+
+      def item(&block)
+        @item_block = block
+      end
+
+      def before_render
+        content
+      end
+
+      def card_data
+        @items.each_with_index.map do |item, index|
+          scale = 1 - (index * STACK_SCALE_STEP)
+          translate_y = index * STACK_TRANSLATE_STEP
+          {
+            item: item,
+            index: index,
+            z_index: @items.length - index,
+            transform: "scale(#{scale}) translateY(#{translate_y}px)"
+          }
+        end
+      end
+
+      def empty?
+        @items.empty?
+      end
+
+      def item_id(item, fallback_index: nil)
+        if item.respond_to?(:id)
+          item.id
+        else
+          fallback_index
+        end
+      end
+    end
+  end
+end

data/app/components/keystone/ui/tab_switcher_component.html.erb

@@ -0,0 +1,14 @@
+<div data-controller="tab-switcher">
+  <div class="<%= classes %>">
+    <% tabs.each_with_index do |tab, index| %>
+      <button
+        type="button"
+        class="<%= tab_classes %>"
+        data-tab-switcher-target="tab"
+        data-action="click->tab-switcher#select"
+        data-index="<%= index %>"
+        <%= "data-active" if index == 0 %>><%= tab %></button>
+    <% end %>
+  </div>
+  <%= content %>
+</div>

data/app/components/keystone/ui/tab_switcher_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class TabSwitcherComponent < ViewComponent::Base
+      TAB_BAR_CLASSES = "mb-8 flex flex-wrap justify-center gap-2"
+      TAB_BASE_CLASSES = "rounded-lg px-4 py-2 text-sm font-semibold transition text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+      PANEL_CLASSES = "hidden"
+
+      attr_reader :tabs
+
+      def initialize(tabs:)
+        @tabs = tabs
+      end
+
+      def classes
+        TAB_BAR_CLASSES
+      end
+
+      def tab_classes
+        "#{TAB_BASE_CLASSES} data-[active]:bg-accent-500/10 data-[active]:text-accent-600 dark:data-[active]:bg-accent-500/10 dark:data-[active]:text-accent-400"
+      end
+
+      def panel_classes
+        PANEL_CLASSES
+      end
+
+      def wrapper_data
+        { controller: "tab-switcher" }
+      end
+    end
+  end
+end

data/app/components/keystone/ui/textarea_component.html.erb

@@ -0,0 +1 @@
+<%= tag.textarea(@value, **tag_options) %>

data/app/components/keystone/ui/textarea_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Keystone
+  module Ui
+    class TextareaComponent < ViewComponent::Base
+      BASE_CLASSES = "block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white dark:placeholder:text-gray-500"
+
+      DISABLED_CLASSES = "cursor-not-allowed bg-gray-50 text-gray-500 dark:bg-zinc-800 dark:text-gray-400"
+
+      def initialize(name:, value: nil, rows: 3, placeholder: nil, disabled: false)
+        @name = name
+        @value = value
+        @rows = rows
+        @placeholder = placeholder
+        @disabled = disabled
+      end
+
+      FOCUS_CLASSES = "focus:border-accent-500 focus:ring-accent-500 dark:focus:border-accent-400 dark:focus:ring-accent-400"
+
+      def classes
+        tokens = [ BASE_CLASSES, FOCUS_CLASSES ]
+        tokens << DISABLED_CLASSES if @disabled
+        tokens.join(" ")
+      end
+
+      def tag_options
+        options = {
+          name: @name,
+          rows: @rows,
+          class: classes
+        }
+        options[:placeholder] = @placeholder unless @placeholder.nil?
+        options[:disabled] = true if @disabled
+        options
+      end
+    end
+  end
+end