brutalist_rails_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 926531173316cb0b387b1797fbdd6c0d6dab22ef199c62fb72ec3dd888cb1c63
+  data.tar.gz: 8d53b13cda298e3b3a2b883f65085a7c32c267a86033461169fd03faf79414b7
+SHA512:
+  metadata.gz: 3140365ce4b09dc1bf643f5783c6ebec46fa2cf8da2de1e896d9be59b58d79e1f7c062814dab893dbb5079ab67c91b26f282ee2e7f2c49c0c3431db544ed98f7
+  data.tar.gz: c7a80dd90bf304791176303e660cc6b6106e79668f1bfbc2e852c46af3b192018d745c390213b8b00ad20325a8d6da13fcba73b561ea4d9a45f6b55a25c211e3

data/README.md

@@ -0,0 +1,240 @@
+# brutalist_rails_ui
+
+Neobrutalist UI component library for Rails. Thick black borders, yellow accents, uppercase type, no rounded corners.
+
+Built with Tailwind CSS v4 + Hotwire.
+
+## Installation
+
+Add to your Gemfile:
+
+```ruby
+gem "brutalist_rails_ui", path: "path/to/brutalist_rails_ui"
+```
+
+Run the installer:
+
+```bash
+bundle install
+rails g brutalist_rails_ui:install
+bin/rails tailwindcss:build
+```
+
+Add to `app/helpers/application_helper.rb`:
+
+```ruby
+module ApplicationHelper
+  include BrutalistRailsUi::Helpers
+end
+```
+
+The generator:
+- Copies `brutalist_rails_ui.css` → `app/assets/tailwind/`
+- Injects `@import "./brutalist_rails_ui"` into `application.css`
+- Copies `modal_controller.js` → `app/javascript/controllers/`
+
+Add `modal_controller` to your importmap in `application.html.erb`:
+
+```erb
+"controllers/modal_controller": "<%= asset_path('controllers/modal_controller.js') %>"
+```
+
+## CSS Directives
+
+| Class | Use |
+|-------|-----|
+| `.btn-primary` | Black button, yellow on hover |
+| `.btn-secondary` | White button, yellow on hover |
+| `.btn-danger` | Red button |
+| `.input` | Form input field |
+| `.label` | Form label |
+| `.card` | White box with black border |
+| `.card-header` | Black bar with white text (inside `.card`) |
+| `.table-brutal` | Table with black header and dividers |
+| `.badge` | Inline status pill |
+| `.money-input` | Wrapper for `$`-prefixed number inputs |
+| `.progress-bar` | Gray track with `.progress-bar-fill` inside |
+
+## View Helpers
+
+### `page_header`
+
+```erb
+<%= page_header "Transactions" do %>
+  <%= link_to "+ Add", new_transaction_path, class: "btn-primary text-sm" %>
+<% end %>
+
+<%# With subtitle %>
+<%= page_header "Unassigned", subtitle: "42 transactions need a category" %>
+```
+
+### `card`
+
+```erb
+<%= card "Recent Activity" do %>
+  <p class="p-6">Content here</p>
+<% end %>
+
+<%# No header %>
+<%= card do %>
+  <p class="p-6">Content</p>
+<% end %>
+```
+
+### `card_header`
+
+```erb
+<div class="card">
+  <%= card_header "Accounts", action_text: "View all", action_path: accounts_path %>
+  ...
+</div>
+```
+
+### `empty_state`
+
+```erb
+<%= empty_state icon: "✓", message: "All transactions assigned" %>
+
+<%= empty_state icon: "📭", message: "No accounts yet" do %>
+  <%= link_to "Connect a bank", banks_link_path, class: "btn-primary mt-4" %>
+<% end %>
+```
+
+### `kpi_box`
+
+```erb
+<div class="grid grid-cols-2 gap-4">
+  <%= kpi_box label: "Total Spent", value: "$12.40" %>
+  <%= kpi_box label: "Total Calls", value: "42", dark: true %>
+</div>
+```
+
+### `cta_banner`
+
+```erb
+<%= cta_banner headline: "Connect a bank",
+               subtext: "Sync transactions automatically",
+               link_text: "Get Started",
+               path: banks_link_path %>
+```
+
+### `status_badge`
+
+```erb
+<%= status_badge "pending" %>
+<%= status_badge "over", "over" => "bg-red-600 text-white" %>
+```
+
+### `nav_link`
+
+```erb
+<%= nav_link "Dashboard", root_path %>
+<%= nav_link "Transactions", transactions_path %>
+```
+
+### `money` / `money_class`
+
+```erb
+<span class="<%= money_class(transaction.amount) %>">
+  <%= money(transaction.amount) %>
+</span>
+```
+
+## Partials
+
+### Modal
+
+Wraps content in a Turbo Frame modal overlay with backdrop-click-to-close.
+
+```erb
+<%# In your view (e.g. transactions/new.html.erb) %>
+<%= render "brutalist_rails_ui/modal", title: "Add Transaction", width: "max-w-md" do %>
+  <%= render "form", transaction: @transaction %>
+<% end %>
+```
+
+Options:
+- `title` — header text (required)
+- `width` — Tailwind max-width class (default: `max-w-sm`)
+- `frame_id` — turbo-frame id (default: `modal`)
+- `body_class` — padding class for body wrapper (default: `p-6`)
+
+Add `<turbo-frame id="modal"></turbo-frame>` to your layout.
+
+### Flash
+
+```erb
+<%= render "brutalist_rails_ui/flash" %>
+```
+
+### Pagination
+
+Requires [Pagy](https://github.com/ddnexus/pagy).
+
+```erb
+<%= render "brutalist_rails_ui/pagination", pagy: @pagy %>
+```
+
+### Form buttons
+
+```erb
+<%= render "brutalist_rails_ui/form_buttons",
+    f: f,
+    cancel_path: transactions_path,
+    submit_text: "Add Transaction" %>
+```
+
+Options:
+- `f` — form builder (required)
+- `cancel_path` — cancel link href (required)
+- `submit_text` — submit button label (default: `Save`)
+- `cancel_text` — cancel button label (default: `Cancel`)
+- `cancel_frame` — turbo frame for cancel link (default: `_top`)
+
+## Usage with WASM (wasm-rails)
+
+When running inside [wasm-rails](https://github.com/emerson-argueta/wasm-rails), three extra steps are required because Bundler auto-require and engine view path registration don't work in the WASM environment.
+
+### 1. Explicit require in `config/application.rb`
+
+`Bundler.require` is skipped in WASM, so add an explicit require alongside your other gems:
+
+```ruby
+require "wasm_rails"
+require "brutalist_rails_ui"
+require "turbo-rails"
+```
+
+### 2. Include helpers in `ApplicationHelper`
+
+Rails hooks like `ActiveSupport.on_load` and `config.to_prepare` don't fire reliably in WASM. Include helpers directly instead:
+
+```ruby
+module ApplicationHelper
+  include BrutalistRailsUi::Helpers
+end
+```
+
+### 3. Bundle the gem's ERB partials
+
+Add `brutalist_rails_ui` to `GEM_EXTRA_PATHS` in `bin/build_app_bundle.mjs` so the gem's `app/views` are included in the WASM bundle:
+
+```js
+const GEM_EXTRA_PATHS = {
+  'turbo-rails': ['app/controllers', 'app/controllers/concerns', 'app/helpers', 'app/models', 'app/models/concerns', 'app/views'],
+  'brutalist_rails_ui': ['app/views'],
+};
+```
+
+Then rebuild:
+
+```bash
+npm run build:app
+```
+
+## Requirements
+
+- Ruby 3.1+
+- Rails 7.1+
+- Tailwind CSS v4 (via tailwindcss-rails)
+- Hotwire / Stimulus (for modal controller)

data/app/views/brutalist_rails_ui/_flash.html.erb

@@ -0,0 +1,7 @@
+<% if notice.present? %>
+  <div id="flash" class="border-2 border-black bg-yellow-400 p-3 text-sm font-bold mb-4"><%= notice %></div>
+<% elsif alert.present? %>
+  <div id="flash" class="border-2 border-black bg-red-500 text-white p-3 text-sm font-bold mb-4"><%= alert %></div>
+<% else %>
+  <div id="flash"></div>
+<% end %>

data/app/views/brutalist_rails_ui/_form_buttons.html.erb

@@ -0,0 +1,6 @@
+<div class="flex justify-end gap-2 pt-2">
+  <%= link_to local_assigns.fetch(:cancel_text, "Cancel"), cancel_path,
+      class: "btn-secondary",
+      data: { turbo_frame: local_assigns.fetch(:cancel_frame, "_top") } %>
+  <%= f.submit local_assigns.fetch(:submit_text, "Save"), class: "btn-primary" %>
+</div>

data/app/views/brutalist_rails_ui/_modal.html.erb

@@ -0,0 +1,15 @@
+<turbo-frame id="<%= local_assigns.fetch(:frame_id, "modal") %>">
+  <div class="fixed inset-0 bg-black/60 flex items-center justify-content z-50"
+       data-controller="modal"
+       data-action="click->modal#closeOnBackdrop">
+    <div class="bg-white border-2 border-black w-full <%= local_assigns.fetch(:width, "max-w-sm") %> overflow-hidden mx-auto"
+         data-modal-target="panel">
+      <div class="px-6 py-3 bg-black">
+        <h2 class="text-sm font-black text-white uppercase tracking-wider"><%= title %></h2>
+      </div>
+      <div class="<%= local_assigns.fetch(:body_class, "p-6") %>">
+        <%= yield %>
+      </div>
+    </div>
+  </div>
+</turbo-frame>

data/app/views/brutalist_rails_ui/_pagination.html.erb

@@ -0,0 +1,13 @@
+<% if pagy.last > 1 %>
+  <div class="flex items-center justify-between mt-4 text-sm font-bold border-2 border-black px-4 py-3 bg-white">
+    <span class="text-xs uppercase tracking-wide">Showing <%= pagy.from %>–<%= pagy.to %> of <%= pagy.count %></span>
+    <div class="flex gap-0">
+      <% if pagy.previous %>
+        <%= link_to "← Prev", url_for(page: pagy.previous), class: "px-3 py-1 border-2 border-black hover:bg-yellow-400 font-bold text-xs" %>
+      <% end %>
+      <% if pagy.next %>
+        <%= link_to "Next →", url_for(page: pagy.next), class: "px-3 py-1 border-2 border-black hover:bg-yellow-400 font-bold text-xs" %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/lib/brutalist_rails_ui/engine.rb

@@ -0,0 +1,4 @@
+module BrutalistRailsUi
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/brutalist_rails_ui/helpers.rb

@@ -0,0 +1,138 @@
+module BrutalistRailsUi
+  module Helpers
+    # Nav link that highlights when active.
+    # Pass mobile: true for the vertical mobile menu variant.
+    def nav_link(label, path, mobile: false, **options)
+      base = path.split("?").first
+      active = current_page?(path) || (base != "/" && request.path.start_with?(base))
+      if mobile
+        classes = active \
+          ? "block bg-yellow-400 text-black px-4 py-3 text-sm font-bold border-b border-gray-700" \
+          : "block text-white hover:bg-gray-800 px-4 py-3 text-sm font-bold border-b border-gray-700"
+      else
+        classes = active \
+          ? "bg-yellow-400 text-black px-3 py-4 text-sm font-bold border-r border-l border-yellow-400" \
+          : "text-white hover:bg-white hover:text-black px-3 py-4 text-sm font-bold border-r border-gray-700 last:border-r-0"
+      end
+      link_to label, path, class: classes, **options
+    end
+
+    # Page header row: h1 title + optional action buttons block.
+    #
+    #   <%= page_header "Transactions" do %>
+    #     <%= link_to "+ Add", new_transaction_path, class: "btn-primary" %>
+    #   <% end %>
+    def page_header(title, subtitle: nil, &block)
+      content_tag :div, class: "flex flex-wrap items-center justify-between gap-3 mb-6" do
+        concat content_tag(:div) {
+          concat content_tag(:h1, title, class: "text-2xl font-black text-black uppercase tracking-tight")
+          concat content_tag(:p, subtitle, class: "text-sm font-bold text-gray-500 mt-1 uppercase tracking-wide") if subtitle
+        }
+        concat content_tag(:div, capture(&block), class: "flex flex-wrap items-center gap-2") if block
+      end
+    end
+
+    # White card with optional black header bar.
+    #
+    #   <%= card "Recent Transactions" do %>
+    #     <p class="p-6">Content here</p>
+    #   <% end %>
+    def card(title = nil, &block)
+      content_tag :div, class: "bg-white border-2 border-black overflow-hidden" do
+        if title
+          concat content_tag(:div, class: "px-6 py-3 bg-black") {
+            content_tag(:h2, title, class: "text-xs font-bold text-white uppercase tracking-wider")
+          }
+        end
+        concat capture(&block)
+      end
+    end
+
+    # Card header bar with optional right-side action.
+    #
+    #   <%= card_header "Accounts", action_text: "View all", action_path: accounts_path %>
+    def card_header(title, action_text: nil, action_path: nil)
+      content_tag :div, class: "px-6 py-3 bg-black flex items-center justify-between" do
+        concat content_tag(:h2, title, class: "text-xs font-bold text-white uppercase tracking-wider")
+        if action_text && action_path
+          concat link_to(action_text, action_path, class: "text-xs text-yellow-400 hover:text-white font-bold")
+        end
+      end
+    end
+
+    # Centered empty state with icon and message.
+    #
+    #   <%= empty_state icon: "✓", message: "All transactions assigned" %>
+    #   <%= empty_state icon: "📭", message: "No accounts yet" do %>
+    #     <%= link_to "Connect a bank", banks_link_path, class: "btn-primary mt-4" %>
+    #   <% end %>
+    def empty_state(icon: nil, message:, &block)
+      content_tag :div, class: "px-6 py-12 text-center" do
+        concat content_tag(:p, icon, class: "text-3xl mb-3") if icon
+        concat content_tag(:p, message, class: "font-black text-black uppercase tracking-wide")
+        concat capture(&block) if block
+      end
+    end
+
+    # KPI stat box for summary grids.
+    #
+    #   <div class="grid grid-cols-2 gap-4">
+    #     <%= kpi_box label: "Total Spent", value: "$12.40" %>
+    #     <%= kpi_box label: "Total Calls", value: "42", dark: true %>
+    #   </div>
+    def kpi_box(label:, value:, dark: false)
+      bg = dark ? "bg-black text-white" : "bg-white border-2 border-black text-black"
+      label_class = dark ? "text-xs font-bold uppercase tracking-widest text-gray-400 mb-1" \
+                         : "text-xs font-bold uppercase tracking-widest text-gray-500 mb-1"
+      content_tag :div, class: "#{bg} p-5" do
+        concat content_tag(:p, label, class: label_class)
+        concat content_tag(:p, value, class: "text-2xl font-black")
+      end
+    end
+
+    # Yellow CTA banner with headline and action link.
+    #
+    #   <%= cta_banner headline: "Connect a bank",
+    #                  subtext: "Sync transactions automatically",
+    #                  link_text: "Get Started",
+    #                  path: banks_link_path %>
+    def cta_banner(headline:, subtext: nil, link_text:, path:, **link_options)
+      content_tag :div, class: "border-2 border-black bg-yellow-400 p-6 flex items-center justify-between gap-4" do
+        concat content_tag(:div) {
+          concat content_tag(:p, headline, class: "font-black text-black uppercase")
+          concat content_tag(:p, subtext, class: "text-sm text-black mt-1 font-bold") if subtext
+        }
+        concat link_to(link_text, path, class: "btn-primary flex-shrink-0", **link_options)
+      end
+    end
+
+    # Status badge pill.
+    #
+    #   <%= status_badge "pending" %>
+    #   <%= status_badge "funded", "funded" => "bg-green-600 text-white" %>
+    def status_badge(status, color_map = {})
+      defaults = {
+        "active"    => "bg-black text-white",
+        "funded"    => "bg-black text-white",
+        "over"      => "bg-red-600 text-white",
+        "pending"   => "bg-yellow-400 text-black",
+        "income"    => "bg-black text-white",
+        "transfer"  => "bg-white text-black",
+        "untracked" => "bg-white text-black"
+      }.merge(color_map)
+      color = defaults[status.to_s] || "bg-white text-black"
+      tag.span status.to_s.humanize,
+        class: "inline-flex items-center border-2 border-black px-2 py-0.5 text-xs font-bold uppercase tracking-wide #{color}"
+    end
+
+    # Format a number as currency.
+    def money(amount)
+      number_to_currency(amount, unit: "$", precision: 2)
+    end
+
+    # CSS class for positive/negative amounts.
+    def money_class(amount)
+      amount.to_f.negative? ? "text-red-600" : "text-black"
+    end
+  end
+end

data/lib/brutalist_rails_ui/version.rb

@@ -0,0 +1,3 @@
+module BrutalistRailsUi
+  VERSION = "0.1.0"
+end

data/lib/brutalist_rails_ui.rb

@@ -0,0 +1,3 @@
+require "brutalist_rails_ui/version"
+require "brutalist_rails_ui/helpers"
+require "brutalist_rails_ui/engine" if defined?(Rails)

data/lib/generators/brutalist_rails_ui/install/install_generator.rb

@@ -0,0 +1,34 @@
+require "rails/generators"
+
+module BrutalistRailsUi
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Installs BrutalistRailsUi CSS and Stimulus modal controller"
+
+      def copy_css
+        copy_file "brutalist_rails_ui.css", "app/assets/tailwind/brutalist_rails_ui.css"
+        inject_into_file "app/assets/tailwind/application.css",
+          %(@import "./brutalist_rails_ui";\n),
+          after: %(@import "tailwindcss";\n)
+      rescue Thor::Error
+        say_status :skip, "Could not inject import — add '@import \"./brutalist_rails_ui\";' to app/assets/tailwind/application.css manually", :yellow
+      end
+
+      def copy_modal_controller
+        copy_file "modal_controller.js", "app/javascript/controllers/modal_controller.js"
+      end
+
+      def done
+        say ""
+        say "BrutalistRailsUi installed!", :green
+        say ""
+        say "  1. Rebuild Tailwind:  bin/rails tailwindcss:build"
+        say "  2. Add modal to your layout's importmap (if using importmap-rails):"
+        say "       \"controllers/modal_controller\": asset_path('controllers/modal_controller.js')"
+        say ""
+      end
+    end
+  end
+end

data/lib/generators/brutalist_rails_ui/install/templates/brutalist_rails_ui.css

@@ -0,0 +1,88 @@
+@layer components {
+  /* Buttons */
+  .btn-primary {
+    @apply inline-flex items-center px-4 py-2 text-sm font-bold bg-black text-white hover:bg-yellow-400 hover:text-black border-2 border-black cursor-pointer;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center px-4 py-2 text-sm font-bold bg-white text-black hover:bg-yellow-400 border-2 border-black cursor-pointer;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center px-4 py-2 text-sm font-bold bg-red-600 text-white hover:bg-red-700 border-2 border-black cursor-pointer;
+  }
+
+  /* Form controls */
+  .input {
+    @apply w-full border-2 border-black px-3 py-2 text-sm font-mono focus:outline-none focus:border-black bg-white;
+  }
+
+  .label {
+    @apply block text-xs font-bold uppercase tracking-wide mb-1;
+  }
+
+  /* Layout */
+  .card {
+    @apply bg-white border-2 border-black overflow-hidden;
+  }
+
+  .card-header {
+    @apply px-6 py-3 bg-black;
+  }
+
+  /* Table */
+  .table-brutal {
+    @apply w-full;
+  }
+
+  .table-brutal thead {
+    @apply bg-black;
+  }
+
+  .table-brutal thead th {
+    @apply px-6 py-3 text-left text-xs font-bold text-gray-400 uppercase tracking-wider;
+  }
+
+  .table-brutal tbody {
+    @apply divide-y-2 divide-black bg-white;
+  }
+
+  .table-brutal tbody tr {
+    @apply hover:bg-gray-50;
+  }
+
+  .table-brutal tbody td {
+    @apply px-6 py-3 text-sm;
+  }
+
+  /* Badge */
+  .badge {
+    @apply inline-flex items-center border-2 border-black px-2 py-0.5 text-xs font-bold uppercase tracking-wide;
+  }
+
+  /* Money input wrapper */
+  .money-input {
+    @apply relative;
+  }
+
+  .money-input .money-prefix {
+    @apply absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 text-sm font-bold pointer-events-none;
+  }
+
+  .money-input .input {
+    @apply pl-7;
+  }
+
+  /* Progress bar */
+  .progress-bar {
+    @apply h-2 bg-gray-200 overflow-hidden;
+  }
+
+  .progress-bar-fill {
+    @apply h-full bg-black transition-all;
+  }
+
+  .progress-bar-fill.over {
+    @apply bg-red-600;
+  }
+}

data/lib/generators/brutalist_rails_ui/install/templates/modal_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["panel"]
+
+  closeOnBackdrop(event) {
+    if (this.hasPanelTarget && !this.panelTarget.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  close() {
+    const frame = this.element.closest("turbo-frame")
+    if (frame) frame.innerHTML = ""
+  }
+}

metadata

@@ -0,0 +1,83 @@
+--- !ruby/object:Gem::Specification
+name: brutalist_rails_ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Emerson Argueta
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2026-05-14 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+- !ruby/object:Gem::Dependency
+  name: actionview
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+description:
+email:
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/views/brutalist_rails_ui/_flash.html.erb
+- app/views/brutalist_rails_ui/_form_buttons.html.erb
+- app/views/brutalist_rails_ui/_modal.html.erb
+- app/views/brutalist_rails_ui/_pagination.html.erb
+- lib/brutalist_rails_ui.rb
+- lib/brutalist_rails_ui/engine.rb
+- lib/brutalist_rails_ui/helpers.rb
+- lib/brutalist_rails_ui/version.rb
+- lib/generators/brutalist_rails_ui/install/install_generator.rb
+- lib/generators/brutalist_rails_ui/install/templates/brutalist_rails_ui.css
+- lib/generators/brutalist_rails_ui/install/templates/modal_controller.js
+homepage:
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.9
+signing_key:
+specification_version: 4
+summary: Neobrutalist UI components for Rails — Tailwind directives, view helpers,
+  and partials.
+test_files: []