tramway 3.1.1.3 → 3.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fdfbb8e7d69f349ee20bc52b7fe51f9a150c09bceb8d7892804d33dd926e36d8
-  data.tar.gz: e5b62beadc816266f03fbfc49a1a72ec2ffc7883ec59930192b5bc76f2e701c2
+  metadata.gz: b60bf123066d7c59336dba45b1dae5ab6a90b36fd54063c73f04d4fcac17ba21
+  data.tar.gz: d1512dee19a6f92b27791ad9b6b40582e0b0e90b7ef2a6304e7d1846d7d05930
 SHA512:
-  metadata.gz: b550f718d7f5c954f9606b5cea2deed8144336b4e5d05ab51ab33a16544c90fb78ffea04a378b43002c55687e723789944f196ce9f22b0335aeb436e0520829c
-  data.tar.gz: 502e0c85c6f0a28ef46d22958147a5ba3b55b6350f8d710b34bd35354a68165be61c938c87e3414caf5436b7b78c4c802b409560a65d3fa52022e2bf64b7fab7
+  metadata.gz: fbe4b415c8fc353f3be1453064072dc34864181f795f92c631ff2776af7fa060f0c0ab893149b8e3fb1702365b9f56c286b038424bff034b6ec3a1a6c13156b8
+  data.tar.gz: 4a403cd5695f25bf309feceed280afdf9cc489eff25dd1d37bf766b2714aff4fd22cf6d0fbf460659b115258bd9b89f6b10bb5c419c228a077d97272921222c8

data/README.md

@@ -53,7 +53,8 @@ bin/rails g tramway:install
 ```
 
 The install generator adds the required gems (`haml-rails`, `kaminari`, `view_component`, `dry-initializer`, and `dry-monads`) to your
-application's Gemfile—if they are not present—and appends the Tailwind safelist configuration Tramway ships with.
+application's Gemfile—if they are not present—appends the Tailwind safelist configuration Tramway ships with, and injects the
+Trix stylesheet and JavaScript tags into your application layout (required for `rich_text_area`).
 
 ## Getting Started
 
@@ -1203,6 +1204,7 @@ Checkboxes render dark while unchecked and use the light primary checked state.
   <%= f.select :role, [:admin, :user] %>
   <%= f.date_field :birth_date %>
   <%= f.datetime_field :confirmed_at %>
+  <%= f.rich_text_area :bio %>
   <%= f.tramway_select :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
   <%= f.file_field :file %>
   <%= f.submit 'Create User' %>
@@ -1238,10 +1240,12 @@ Available form helpers:
 * password_field
 * file_field
 * check_box
+* checkbox (alias for check_box)
 * select
 * date_field
 * datetime_field
 * time_field
+* rich_text_area (Action Text/Trix editor with Tramway dark form classes)
 * tramway_select ([Stimulus-based](https://github.com/Purple-Magic/tramway#stimulus-based-inputs))
 * submit
 
@@ -1283,6 +1287,60 @@ same select field.
 <% end %>
 ```
 
+#### Rich text area
+
+`rich_text_area` (and its alias `rich_textarea`) renders a [Trix](https://trix-editor.org/) rich text editor
+with Tramway's dark-theme Tailwind styling. Trix is bundled with Rails and does not require an additional gem.
+
+Before using `rich_text_area`, the Trix stylesheet and JavaScript must be present in your application layout.
+The `tramway:install` generator adds them automatically. To add them manually:
+
+```haml
+-# app/views/layouts/application.html.haml
+= stylesheet_link_tag "trix", "data-turbo-track": "reload"
+= javascript_include_tag "trix", "data-turbo-track": "reload", defer: true
+```
+
+```erb
+<%# app/views/layouts/application.html.erb %>
+<%= stylesheet_link_tag "trix", "data-turbo-track": "reload" %>
+<%= javascript_include_tag "trix", "data-turbo-track": "reload", defer: true %>
+```
+
+Basic usage:
+
+```erb
+<%= tramway_form_for @post do |f| %>
+  <%= f.rich_text_area :body %>
+<% end %>
+```
+
+Custom label and extra CSS class:
+
+```erb
+<%= tramway_form_for @post do |f| %>
+  <%= f.rich_text_area :body, label: 'Post body', class: 'min-h-60' %>
+<% end %>
+```
+
+Suppress the label:
+
+```erb
+<%= tramway_form_for @post do |f| %>
+  <%= f.rich_text_area :body, label: false %>
+<% end %>
+```
+
+Pass `data` attributes for Stimulus controllers:
+
+```erb
+<%= tramway_form_for @post do |f| %>
+  <%= f.rich_text_area :body, data: { controller: 'mentions' } %>
+<% end %>
+```
+
+`size:` is a Tramway-level option and is not forwarded to the `<trix-editor>` element.
+
 #### Stimulus-based inputs
 
 `tramway_form_for` provides Tailwind-styled Stimulus-based custom inputs.
@@ -1339,7 +1397,6 @@ With `remote: true`, Tramway submits the form on each input `change` via inline
 ### Tailwind-styled pagination for Kaminari
 
 Tramway uses [Tailwind](https://tailwindcss.com/) by default. It has tailwind-styled pagination for [kaminari](https://github.com/kaminari/kaminari).
-Pagination components use hardcoded dark shadcn-style classes and do not render a separate light theme.
 
 #### How to use
 

data/app/components/tramway/form/builder.rb

@@ -56,6 +56,14 @@ module Tramway
         common_field(:text_area, :text_area, attribute, **, &)
       end
 
+      def rich_text_area(attribute, **, &)
+        rich_text_area_field(:rich_text_area, attribute, **, &)
+      end
+
+      def rich_textarea(attribute, **, &)
+        rich_text_area_field(:rich_textarea, attribute, **, &)
+      end
+
       def password_field(attribute, **options, &)
         sanitized_options = sanitize_options(options)
 
@@ -88,6 +96,8 @@ module Tramway
         common_field(:checkbox, :check_box, attribute, **, &)
       end
 
+      alias checkbox check_box
+
       def select(attribute, collection, **options, &)
         if options[:multiple] || options[:autocomplete]
           tramway_select(attribute, collection, **options, &)
@@ -138,6 +148,15 @@ module Tramway
                ), &)
       end
 
+      def rich_text_area_field(input_method, attribute, **options, &)
+        sanitized_options = sanitize_options(options)
+
+        render(Tramway::Form::RichTextAreaComponent.new(
+                 input: input(input_method),
+                 **default_options(attribute, sanitized_options)
+               ), &)
+      end
+
       def input(method_name)
         unbound_method = self.class.superclass.instance_method(method_name)
         unbound_method.bind(self)

data/app/components/tramway/form/rich_text_area_component.html.haml

@@ -0,0 +1,14 @@
+%div{ class: default_container_classes }
+  :css
+    trix-toolbar .trix-button-group {
+      border-color: #52525b;
+    }
+
+    trix-toolbar .trix-button:not(.trix-active)::before {
+      filter: invert(1);
+    }
+
+  - if @label
+    = component('tramway/form/label', for: @for, class: 'mb-0') do
+      = @label
+  = @input.call @attribute, **rich_text_area_options

data/app/components/tramway/form/rich_text_area_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Form
+    # Tailwind-styled rich text area
+    class RichTextAreaComponent < TailwindComponent
+      RICH_TEXT_AREA_CLASSES = [
+        'trix-content',
+        'prose',
+        'prose-invert',
+        'max-w-none',
+        'w-full',
+        'min-h-40',
+        'rounded-md',
+        'border',
+        'border-zinc-800',
+        'bg-zinc-950',
+        '!bg-zinc-950',
+        'text-zinc-50',
+        '!text-zinc-50',
+        'shadow-sm',
+        'transition-colors',
+        'focus-visible:outline-none',
+        'focus-visible:ring-2',
+        'focus-visible:ring-zinc-300',
+        'focus-visible:ring-offset-2',
+        'focus-visible:ring-offset-zinc-950',
+        'disabled:cursor-not-allowed',
+        'disabled:opacity-50'
+      ].freeze
+
+      private
+
+      def rich_text_area_options
+        options.dup.tap do |rich_text_options|
+          custom_class = rich_text_options.delete(:class) || rich_text_options.delete('class')
+          rich_text_options[:class] = [RICH_TEXT_AREA_CLASSES, custom_class].compact.join(' ')
+        end
+      end
+    end
+  end
+end

data/app/components/tramway/table/row_component.html.haml

@@ -8,7 +8,7 @@
   - cells = visible_cells_from(content)
 
   - if href.present?
-    = tag.a href:, class: [desktop_row_classes(cells.count), link_row_classes].join(' '), **default_attributes do
+    = tag.a href:, class: [desktop_row_classes(cells.count), link_row_classes, options[:class]].join(' '), **default_attributes, **options.except(:class) do
       = content
   - else
     - if preview
@@ -18,5 +18,5 @@
 
           = cell.to_s.html_safe
 
-    = tag.div class: desktop_row_classes(cells.count), data: { action: "click->table-row-preview#toggle", controller: "table-row-preview" }, **default_attributes do
+    = tag.div class: [desktop_row_classes(cells.count), options[:class]].join(' '), data: { action: "click->table-row-preview#toggle", controller: "table-row-preview" }, **default_attributes, **options.except(:class) do
       = content

data/app/views/tramway/layouts/application.html.haml

@@ -9,15 +9,13 @@
 
     = yield :head
 
-    / Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!)
-    / = tag.link rel: "manifest", href: pwa_manifest_path(format: :json)
-
     %link{rel: "icon", href: "/icon.png", type: "image/png"}
     %link{rel: "icon", href: "/icon.svg", type: "image/svg+xml"}
     %link{rel: "apple-touch-icon", href: "/icon.png"}
 
-    / Includes all stylesheet files in app/assets/stylesheets
     = stylesheet_link_tag "tailwind", "data-turbo-track": "reload"
+    = stylesheet_link_tag "trix", "data-turbo-track": "reload"
+    = javascript_include_tag "trix", "data-turbo-track": "reload", defer: true
 
   %body.bg-zinc-950.text-zinc-50
     = tramway_navbar title: 'Tramway'

data/config/tailwind.config.js

@@ -27,6 +27,7 @@ module.exports = {
     'pt-16',
     'min-h-8',
     'bg-zinc-950',
+    '!bg-zinc-950',
     'bg-zinc-950/95',
     'bg-zinc-950/80',
     'bg-zinc-900',
@@ -34,6 +35,7 @@ module.exports = {
     'bg-zinc-900/80',
     'border-zinc-800',
     'text-zinc-50',
+    '!text-zinc-50',
     'text-zinc-100',
     'text-zinc-200',
     'text-zinc-400',
@@ -221,6 +223,9 @@ module.exports = {
     'hidden',
     'text-xl',
     'font-bold',
+    'prose',
+    'prose-invert',
+    'max-w-none',
 
     // === Button base shell ===
     'inline-flex',
@@ -338,6 +343,7 @@ module.exports = {
     'min-h-10',
     'min-h-12',
     'min-h-15',
+    'min-h-40',
     'max-w-full',
 
     // === Spacing utilities ===
@@ -380,7 +386,6 @@ module.exports = {
     'left-1/2',
     '-translate-x-1/2',
     'z-50',
-    'mb-2',
     'w-max',
     'min-w-40',
     'max-w-sm',

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

@@ -95,6 +95,28 @@ module Tramway
         @agents_file_path ||= File.join(destination_root, 'AGENTS.md')
       end
 
+      def application_layout_haml_path
+        @application_layout_haml_path ||= File.join(destination_root, 'app/views/layouts/application.html.haml')
+      end
+
+      def application_layout_erb_path
+        @application_layout_erb_path ||= File.join(destination_root, 'app/views/layouts/application.html.erb')
+      end
+
+      def trix_haml_tags
+        "    = stylesheet_link_tag \"trix\", \"data-turbo-track\": \"reload\"\n    " \
+          "= javascript_include_tag \"trix\", \"data-turbo-track\": \"reload\", defer: true\n"
+      end
+
+      def trix_erb_tags
+        "    <%= stylesheet_link_tag \"trix\", \"data-turbo-track\": \"reload\" %>\n    " \
+          "<%= javascript_include_tag \"trix\", \"data-turbo-track\": \"reload\", defer: true %>\n"
+      end
+
+      def trix_already_present?(content)
+        content.include?('stylesheet_link_tag "trix"') || content.include?("stylesheet_link_tag 'trix'")
+      end
+
       def codex_agents_instruction
         'If you are Codex, use the tramway-skill skill for Tramway/Rails work in this project. ' \
           'If tramway-skill is not installed, install it from https://github.com/Purple-Magic/tramway-skill/.'
@@ -323,6 +345,34 @@ module Tramway
 
         File.write(controllers_index_path, updated)
       end
+
+      def ensure_trix_in_application_layout
+        if File.exist?(application_layout_haml_path)
+          ensure_trix_in_haml_layout
+        elsif File.exist?(application_layout_erb_path)
+          ensure_trix_in_erb_layout
+        end
+      end
+
+      private
+
+      def ensure_trix_in_haml_layout
+        content = File.read(application_layout_haml_path)
+        return if trix_already_present?(content)
+        return unless content.match?(/^\s+%body/)
+
+        updated = content.sub(/^(\s+%body)/, "#{trix_haml_tags}\\1")
+        File.write(application_layout_haml_path, updated)
+      end
+
+      def ensure_trix_in_erb_layout
+        content = File.read(application_layout_erb_path)
+        return if trix_already_present?(content)
+        return unless content.include?('</head>')
+
+        updated = content.sub('</head>', "#{trix_erb_tags}  </head>")
+        File.write(application_layout_erb_path, updated)
+      end
     end
   end
 end

data/lib/tramway/utils/field.rb

@@ -23,7 +23,7 @@ module Tramway
 
       def field_name(field_data)
         case field_data.to_sym
-        when :text_area, :select, :tramway_select, :check_box
+        when :text_area, :rich_text_area, :rich_textarea, :select, :tramway_select, :check_box
           field_data
         when :checkbox
           :check_box

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '3.1.1.3'
+  VERSION = '3.1.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 3.1.1.3
+  version: 3.1.2
 platform: ruby
 authors:
 - kalashnikovisme
@@ -183,6 +183,8 @@ files:
 - app/components/tramway/form/label_component.rb
 - app/components/tramway/form/number_field_component.html.haml
 - app/components/tramway/form/number_field_component.rb
+- app/components/tramway/form/rich_text_area_component.html.haml
+- app/components/tramway/form/rich_text_area_component.rb
 - app/components/tramway/form/select_component.html.haml
 - app/components/tramway/form/select_component.rb
 - app/components/tramway/form/text_area_component.html.haml