solrengine-ui 0.2.2 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3564aea452f55ee6744322d81aa5550d9317a16080123c3524008457dff6271e
-  data.tar.gz: f5af6ae7616484da6e824d1e394778dc9aeffa77679d0edbc096e272a7bd8761
+  metadata.gz: 0ff02121ebeec618fe5a5b9962b9e4e1b0e576fe730f199889dfb1823fc16d85
+  data.tar.gz: 8571bceac6b425d252e8c6a8c98292c4a2706f9fe76750944c253c864cf3c507
 SHA512:
-  metadata.gz: f41f46a12ef331346b04cb8dcff92827727d77a0589afd4c9026d522448f63d342d5d839ae39f1fdcdb79b96b37b8a8717506ccd35e57a64c2a4aabf9e076d34
-  data.tar.gz: cc02c2c5cd9bfb324195a96e89e5bab17b22e119251e7078a7d12658b48e9b5f3296c9b784daa6b8c4dff1cb0fc0acffe35367da643613f8c23f61ed77b81a18
+  metadata.gz: d72055fb826074db1f48534cd7e09ea81e6a155b94cc2383ca2cfe1d8329ca17e244b474d4265857910bcd81ef50d6b0334524fca7baa4bdcb24e2c447b8d173
+  data.tar.gz: 2b7da4e67ef8ef73086a445764784d5657d9f13b98ff9b9a4cd30a273d9bb91bd558e5d6ba6520b05f1115b77293ac9fd653f0574f770fbc362bde96ef845c3f

data/README.md

@@ -1,13 +1,13 @@
 # SolRengine UI
 
-A ViewComponent library for Solana dApps built with Ruby on Rails and [SolRengine](https://github.com/solrengine). Ships 9 ready-to-use components styled with Tailwind CSS, with built-in dark/light mode support and Lookbook previews for every component.
+A ViewComponent library for Solana dApps built with Ruby on Rails and [SolRengine](https://github.com/solrengine). Ships 20 ready-to-use components styled with Tailwind CSS, with built-in dark/light mode support and Lookbook previews for every component.
 
 ## Installation
 
 Add the gem to your Gemfile:
 
 ```ruby
-gem "solrengine-ui", github: "solrengine/ui"
+gem "solrengine-ui"
 
 group :development do
   gem "lookbook", ">= 2.0"
@@ -60,6 +60,17 @@ yarn add @solrengine/ui
 | `NotificationComponent` | `message:`, `type: :info`, `dismissible: true`, `explorer_url: nil` | Flash-style notification with icon and optional explorer link |
 | `ThemeToggleComponent` | _(none)_ | Dark/light mode toggle button |
 | `WalletButtonComponent` | `current_user: nil`, `login_path: "/auth/login"`, `logout_path: "/auth/logout"` | Connect/disconnect wallet button with truncated address |
+| `CardComponent` | `padding: true`, slots: `header`, `body`, `footer` | Container card with optional header/footer |
+| `ModalComponent` | `title: nil`, `size: :md`, slots: `body`, `actions` | Modal dialog with backdrop and close button |
+| `DropdownComponent` | `align: :right`, slots: `trigger`, `items` | Dropdown menu with click-outside close |
+| `CollapseComponent` | `expanded: false`, slots: `collapse_header`, `collapse_body` | Collapsible content section |
+| `FooterComponent` | slots: `links`, `powered_by` | Page footer with links and branding |
+| `TokenListComponent` | `tokens:` (array) | List of token rows with empty state |
+| `TokenRowComponent` | `token:` (hash with symbol, name, balance, icon_uri, usd_value) | Single token row with icon and balance |
+| `TokenIconComponent` | `symbol:`, `uri: nil`, `size: :md` | Token icon image or fallback letter |
+| `TransactionStatusComponent` | `status:`, `signature: nil`, `network:` | Status badge (pending/confirmed/failed/processing) with explorer link |
+| `SendTransactionFormComponent` | `wallet_address: nil`, `network:`, `action_url:` | SOL transfer form with recipient and amount |
+| `AirdropButtonComponent` | `address:`, `network:`, `action_url:` | Airdrop button (devnet/testnet only) |
 
 ## Usage Examples
 
@@ -175,7 +186,7 @@ All components include `dark:` Tailwind variants out of the box. Add the `dark`
 
 ## Lookbook
 
-After running the install generator, visit `/lookbook` in development to browse every component with live previews. The gem ships Lookbook preview classes for all 9 components.
+After running the install generator, visit `/lookbook` in development to browse every component with live previews. The gem ships Lookbook preview classes for all 20 components.
 
 To add Lookbook manually (without the generator):
 

data/app/components/solrengine/ui/address_component.html.erb

@@ -1,7 +1,7 @@
 <span class="inline-flex items-center gap-1.5">
   <% if copyable %>
-    <button data-controller="sui-clipboard" data-sui-clipboard-text-value="<%= address %>" class="text-gray-400 dark:text-gray-400 text-xs font-mono bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors cursor-pointer">
-      <%= truncated_address %>
+    <button data-controller="sui-clipboard" data-sui-clipboard-text-value="<%= address %>" data-action="click->sui-clipboard#copy" class="text-gray-400 dark:text-gray-400 text-xs font-mono bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors cursor-pointer">
+      <span data-sui-clipboard-target="label"><%= truncated_address %></span>
     </button>
   <% else %>
     <span class="text-gray-400 dark:text-gray-400 text-xs font-mono bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 rounded-lg">

data/app/components/solrengine/ui/badge_component.html.erb

@@ -1,3 +1,3 @@
-<span class="px-2 py-0.5 rounded-full text-xs font-medium border <%= variant_classes %>">
+<span class="px-3.5 py-1 rounded-full text-xs font-medium border <%= variant_classes %>">
   <%= text %>
 </span>

data/app/components/solrengine/ui/badge_component.rb

@@ -4,11 +4,11 @@ module Solrengine
   module Ui
     class BadgeComponent < ViewComponent::Base
       VARIANTS = {
-        success: "bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-400 border-green-200 dark:border-green-800",
-        warning: "bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800",
-        error: "bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-400 border-red-200 dark:border-red-800",
-        info: "bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-800",
-        purple: "bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-800"
+        success: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border-green-200 dark:border-green-700/50",
+        warning: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-700/50",
+        error: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-200 dark:border-red-700/50",
+        info: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-blue-200 dark:border-blue-700/50",
+        purple: "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 border-purple-200 dark:border-purple-700/50"
       }.freeze
 
       attr_reader :text, :variant

data/app/components/solrengine/ui/wallet_button_component.html.erb

@@ -6,8 +6,8 @@
     <%= link_to "Disconnect", logout_path, data: { turbo_method: :delete }, class: "text-gray-500 dark:text-gray-400 text-xs hover:text-red-500 dark:hover:text-red-400 transition-colors" %>
   </span>
 <% else %>
-  <%= link_to login_path, class: "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white font-semibold py-2.5 px-5 rounded-xl transition-all duration-200 inline-flex items-center gap-2 text-sm" do %>
-    <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">
+  <%= link_to login_path, class: "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white font-semibold py-3 px-6 rounded-full transition-all duration-200 inline-flex items-center gap-2 whitespace-nowrap" do %>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
     </svg>
     Connect Wallet

data/lib/generators/solrengine/ui/install_generator.rb

@@ -18,6 +18,16 @@ module Solrengine
         append_to_file css_file, "\n/* SolRengine UI components */\n@source \"#{gem_path}/app\";\n"
       end
 
+      def add_dark_mode_variant
+        css_file = "app/assets/stylesheets/application.tailwind.css"
+        return unless File.exist?(css_file)
+
+        content = File.read(css_file)
+        return if content.include?("@custom-variant dark")
+
+        append_to_file css_file, "\n/* Class-based dark mode for SolRengine UI */\n@custom-variant dark (&:where(.dark, .dark *));\n"
+      end
+
       def add_lookbook_route
         route_file = "config/routes.rb"
         content = File.read(route_file)
@@ -46,7 +56,7 @@ module Solrengine
         layout_path = "app/views/layouts/lookbook_preview.html.erb"
         return if File.exist?(layout_path)
 
-        copy_file "lookbook_preview.html.erb", layout_path
+        template "lookbook_preview.html.erb", layout_path
       end
 
       def configure_lookbook_preview_layout

data/lib/solrengine/ui/version.rb

@@ -2,6 +2,6 @@
 
 module Solrengine
   module Ui
-    VERSION = "0.2.2"
+    VERSION = "0.3.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solrengine-ui
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.1
 platform: ruby
 authors:
 - Jose Ferrer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-14 00:00:00.000000000 Z
+date: 2026-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component