tramway 0.5.5.1 → 0.6.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e2e7bd75d61196a4ba4302fe3c05d5dfce6928a35ea0d97022b9170ce911ca8
-  data.tar.gz: 1b89b1fb5a18ae6d28c8afb1b8a1d94da832f0855c1acf1f5ab4f9fb0f1d4bd7
+  metadata.gz: a7d9322ff7e374d37c137d366bec17c0728b350eccf87b146655d7704f1e560d
+  data.tar.gz: 045e0e118d1269095a241ce783ffb08bc282b8e885570341ad57878e4e0e1ac4
 SHA512:
-  metadata.gz: 4565144363a3419833bb267231fc403ff49c1da50caa3ee4ec936d6a2245fc2ddf89ab111af33cc7a5759cd9bc51d90cc456e5108acc78b73e99ca7ea5107158
-  data.tar.gz: a83591d638a439dcd659474cfd50b73f9f292bff11fd2e18987c821df25888a9de4ae68d16fb2d7048eb36949869350339b8c3104ffaa71f92f97042d2a84ba9
+  metadata.gz: 4d4594294bf08a6822a7b4a4d0bb8d777fdaed41fe0024d3fa29a5741c4c46c63ea921ea7c1742888502c42b5195e7198a23e4a80e8dc4216557e40da1e20953
+  data.tar.gz: e2e6f019d9e2b19e8fa32f6d3740c2a32473b9e070845b04756e20e53eb2abb9f51b37dd2aa721bbad98a557e90f55eb32054ed36f1a014056be4dfa8d3018a9

data/README.md

@@ -29,17 +29,18 @@ Add this line to your application's Gemfile:
 
 ```ruby
 gem "tramway"
-gem "haml-rails"
-gem "kaminari"
-gem "view_component"
 ```
 
-OR
+Then install Tramway and its dependencies:
 
 ```shell
-bundle add tramway view_component kaminari view_component
+bundle install
+bin/rails g tramway:install
 ```
 
+The install generator adds the required gems (`haml-rails`, `kaminari`, `view_component`, and `dry-initializer`) to your
+application's Gemfile—if they are not present—and appends the Tailwind safelist configuration Tramway ships with.
+
 ## Getting Started
 
 **Step 1**
@@ -78,7 +79,9 @@ end
 
 **Step 4**
 
-Copy this [file](https://github.com/Purple-Magic/tramway/blob/main/config/tailwind.config.js) to config/tailwind.config.js
+If you ran `bin/rails g tramway:install`, the Tailwind safelist was already appended to `config/tailwind.config.js`.
+Otherwise, copy this [file](https://github.com/Purple-Magic/tramway/blob/main/config/tailwind.config.js) to
+`config/tailwind.config.js`.
 
 
 **Step 5**
@@ -130,13 +133,30 @@ Tramway Entity supports several options that are used in different features.
 ```ruby
 Tramway.configure do |config|
   config.entities = [
-    { name: :user, route: { namespace: :admin } },                                 # `admin_users_path` link in the Tramway Navbar
-    { name: :podcast, route: { route_method: :shows } },                           # `shows_path` link in the Tramway Navbar
-    { name: :episodes, route: { namespace: :podcasts, route_method: :episodes } }, # `podcasts_episodes_path` link in the Tramway Navbar
+    {
+      name: :user,
+      route: { namespace: :admin }
+    }, # `/admin/users` link in the Tramway Navbar
+    {
+      name: :episodes,
+      route: {
+        namespace: :podcasts,
+        route_method: :episodes
+      }
+    }, # `/podcasts/episodes` link in the Tramway Navbar
   ]
 end
 ```
 
+**route_helper**
+
+To get routes Tramway generated just Tramway::Engine.
+
+```ruby
+Tramway::Engine.routes.url_helpers.users_path => '/admin/users'
+Tramway::Engine.routes.url_helpers.podcasts_episodes_path => '/podcasts/episodes'
+```
+
 ### Tramway Decorators
 
 Tramway provides convenient decorators for your objects. **NOTE:** This is not the decorator pattern in its usual representation.
@@ -452,15 +472,19 @@ tramway_navbar title: 'Purple Magic', background: { color: :red, intensity: 500
 end
 ```
 
-# Haml example
+# ERB example
 
-```haml
-= tramway_navbar title: 'Purple Magic', background: { color: :red, intensity: 500 } do |nav|
-  - nav.left do
-    - nav.item 'Users', '/users'
-    - nav.item 'Podcasts', '/podcasts'
-  - nav.right do
-    - nav.item 'Sign out', '/users/sessions', method: :delete, confirm: 'Wanna quit?'
+```erb
+<%= tramway_navbar title: 'Purple Magic', background: { color: :red, intensity: 500 } do |nav| %>
+  <% nav.left do %>
+    <%= nav.item 'Users', '/users' %>
+    <%= nav.item 'Podcasts', '/podcasts' %>
+  <% end %>
+
+  <% nav.right do %>
+    <%= nav.item 'Sign out', '/users/sessions', method: :delete, confirm: 'Wanna quit?' %>
+  <% end %>
+<% end %>
 ```
 
 will render [this](https://play.tailwindcss.com/UZPTCudFw5)
@@ -482,13 +506,16 @@ with_entities: Show Tramway Entities index page links to navbar. Default: true
 
 In case you want to hide entity links you can pass `with_entities: false`.
 
-```haml
-- if current_user.present?
-  = tramway_navbar title: 'WaiWai' do |nav|
-    - nav.left do
-      - nav.item 'Board', admin_board_path
-- else
-  = tramway_navbar title: 'WaiWai', with_entities: false
+```erb
+<% if current_user.present? %>
+  <%= tramway_navbar title: 'WaiWai' do |nav| %>
+    <% nav.left do %>
+      <%= nav.item 'Board', admin_board_path %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= tramway_navbar title: 'WaiWai', with_entities: false %>
+<% end %>
 ```
 
 #### nav.left and nav.right
@@ -526,31 +553,43 @@ end
 
 ### Tramway Table Component
 
-Tramway provides a responsive, tailwind-styled table with light and dark themes.
+Tramway provides a responsive, tailwind-styled table with light and dark themes. Use the `tramway_table`, `tramway_row`, and
+`tramway_cell` helpers to build tables with readable ERB templates while still leveraging the underlying ViewComponent
+implementations.
+
+```erb
+<%= tramway_table do %>
+  <%= component 'tailwinds/table/header', headers: ['Column 1', 'Column 2'] %>
 
-```haml
-= component 'tailwinds/table' do
-  = component 'tailwinds/table/header', headers: ['Column 1', 'Column 2']
-  = component 'tailwinds/table/row' do
-    = component 'tailwinds/table/cell' do
+  <%= tramway_row do %>
+    <%= tramway_cell do %>
       Something
-    = component 'tailwinds/table/cell' do
+    <% end %>
+    <%= tramway_cell do %>
       Another
+    <% end %>
+  <% end %>
+<% end %>
 ```
 
-`Tailwinds::TableComponent` accepts an optional `options` hash that is merged into the outer `.div-table` element. The hash is
-forwarded as HTML attributes, so you can pass things like `id`, `data` attributes, or additional classes. If you do not supply
-your own width utility (e.g. a class that starts with `w-`), the component automatically appends `w-full` to keep the table
-responsive. This allows you to extend the default styling without losing the sensible defaults provided by the component.
+`tramway_table` accepts the same optional `options` hash as `Tailwinds::TableComponent`. The hash is forwarded as HTML
+attributes, so you can pass things like `id`, `data` attributes, or additional classes. If you do not supply your own width
+utility (e.g. a class that starts with `w-`), the component automatically appends `w-full` to keep the table responsive. This
+allows you to extend the default styling without losing the sensible defaults provided by the component.
+
+```erb
+<%= tramway_table class: 'max-w-3xl border border-gray-200', data: { controller: 'table' } do %>
+  <%= component 'tailwinds/table/header', headers: ['Name', 'Email'] %>
 
-```haml
-= component 'tailwinds/table', options: { class: 'max-w-3xl border border-gray-200', data: { controller: 'table' } } do
-  = component 'tailwinds/table/header', headers: ['Name', 'Email']
-  = component 'tailwinds/table/row' do
-    = component 'tailwinds/table/cell' do
-      = user.name
-    = component 'tailwinds/table/cell' do
-      = user.email
+  <%= tramway_row do %>
+    <%= tramway_cell do %>
+      <%= user.name %>
+    <% end %>
+    <%= tramway_cell do %>
+      <%= user.email %>
+    <% end %>
+  <% end %>
+<% end %>
 ```
 
 When you render a header you can either pass the `headers:` array, as in the examples above, or render custom header content in
@@ -558,18 +597,48 @@ the block. `Tailwinds::Table::HeaderComponent` uses the length of the `headers`
 If you omit the array and provide custom content, pass the `columns:` argument so the component knows how many grid columns to
 generate.
 
-```haml
-= component 'tailwinds/table/header', columns: 4 do
-  = component 'tailwinds/table/cell' do
+```erb
+<%= component 'tailwinds/table/header', columns: 4 do %>
+  <%= tramway_cell do %>
     Custom header cell
-  = component 'tailwinds/table/cell' do
+  <% end %>
+  <%= tramway_cell do %>
     Another header cell
-  / ...
+  <% end %>
+  <!-- ... -->
+<% end %>
 ```
 
 With this approach you control the header layout while still benefiting from the default Tailwind grid classes that the header
 component applies.
 
+### Tramway Buttons and Containers
+
+Tramway ships with helpers for common UI patterns built on top of Tailwind components.
+
+* `tramway_button` renders a button-styled link and accepts `path`, optional `text`, HTTP `method`, and styling options such as
+  `color`, `type`, and `size`. All additional keyword arguments are forwarded to the underlying component as HTML attributes.
+
+  ```erb
+  <%= tramway_button path: user_path(user), text: 'View profile', color: :emerald, data: { turbo: false } %>
+  ```
+
+* `tramway_back_button` renders a standardized "Back" link.
+
+  ```erb
+  <%= tramway_back_button %>
+  ```
+
+* `tramway_container` wraps content in a responsive, narrow layout container. Pass an `id` if you need to target the container
+  with JavaScript or CSS.
+
+  ```erb
+  <%= tramway_container id: 'user-settings' do %>
+    <h2 class="text-xl font-semibold">Settings</h2>
+    <p class="mt-2 text-gray-600">Update your preferences below.</p>
+  <% end %>
+  ```
+
 ### Tailwind-styled forms
 
 Tramway uses [Tailwind](https://tailwindcss.com/) by default. All UI helpers are implemented with [ViewComponent](https://github.com/viewcomponent/view_component).
@@ -578,26 +647,56 @@ Tramway uses [Tailwind](https://tailwindcss.com/) by default. All UI helpers are
 
 Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by default.
 
-```ruby
-= tramway_form_for @user do |f|
-  = f.text_field :text
-  = f.password_field :password
-  = f.select :role, [:admin, :user]
-  = f.multiselect :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']]
-  = f.file_field :file
-  = f.submit "Create User"
+```erb
+<%= tramway_form_for @user do |f| %>
+  <%= f.text_field :text %>
+  <%= f.email_field :email %>
+  <%= f.password_field :password %>
+  <%= f.select :role, [:admin, :user] %>
+  <%= f.multiselect :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
+  <%= f.file_field :file %>
+  <%= f.submit 'Create User' %>
+<% end %>
 ```
 
 will render [this](https://play.tailwindcss.com/xho3LfjKkK)
 
 Available form helpers:
 * text_field
+* email_field
 * password_field
 * file_field
 * select
 * multiselect ([Stimulus-based](https://github.com/Purple-Magic/tramway#stimulus-based-inputs))
 * submit
 
+**Examples**
+
+1. Sign In Form for `devise` authentication
+
+*app/views/devise/sessions/new.html.erb*
+```erb
+<%= tramway_form_for(resource, as: resource_name, url: session_path(resource_name), class: 'bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4') do |f| %>
+  <%= component 'forms/errors', record: resource %>
+
+  <%= f.text_field :email, placeholder: 'Your email' %>
+  <%= f.password_field :password, placeholder: 'Your password' %>
+
+  <%= f.submit 'Sign In' %>
+<% end %>
+```
+
+2. Sign In Form for Rails authorization
+
+*app/views/sessions/new.html.erb*
+```erb
+<%= form_with url: login_path, scope: :session, local: true, builder: Tailwinds::Form::Builder do |form| %>
+  <%= form.email_field :email %>
+  <%= form.password_field :password %>
+  <%= form.submit 'Log in' %>
+<% end %>
+```
+
 #### Stimulus-based inputs
 
 `tramway_form_for` provides Tailwind-styled Stimulus-based custom inputs.
@@ -606,10 +705,11 @@ Available form helpers:
 
 In case you want to use tailwind-styled multiselect this way
 
-```haml
-= tramway_form_for @user do |f|
-  = f.multiselect :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']]
-  #- ...
+```erb
+<%= tramway_form_for @user do |f| %>
+  <%= f.multiselect :permissions, [['Create User', 'create_user'], ['Update user', 'update_user']] %>
+  <%# ... %>
+<% end %>
 ```
 
 you should add Tramway Multiselect Stimulus controller to your application.
@@ -633,9 +733,10 @@ application.register('multiselect', Multiselect) // register Multiselect control
 
 Use Stimulus `change` action with Tramway Multiselect
 
-```ruby
-= tramway_form_for @user do |f|
-  = f.multiselect :role, data: { action: 'change->user-form#updateForm' } # user-form is your Stimulus controller, updateForm is a method inside user-form Stimulus controller
+```erb
+<%= tramway_form_for @user do |f| %>
+  <%= f.multiselect :role, data: { action: 'change->user-form#updateForm' } %>
+<% end %>
 ```
 
 ### Tailwind-styled pagination for Kaminari
@@ -657,9 +758,9 @@ Tramway.configure do |config|
 end
 ```
 
-*app/views/users/index.html.haml*
-```haml
-= paginate @users # it will render tailwind-styled pagination buttons by default
+*app/views/users/index.html.erb*
+```erb
+<%= paginate @users %> <%# it will render tailwind-styled pagination buttons by default %>
 ```
 
 Pagination buttons looks like [this](https://play.tailwindcss.com/mqgDS5l9oY)
@@ -680,11 +781,41 @@ user_2 = tramway_form User.first
 user_2.object #=> returns pure user object
 ```
 
+## Configuration
+
+### Custom layout
+
+In case you wanna use a custom layout:
+
+1. Create a controller
+2. Set the layout there
+3. Set this controller as `application_controller` in Tramway initializer
+4. Reload your server
+
+**Example**
+
+*app/controllers/admin/application_controller.rb*
+```ruby
+class Admin::ApplicationController < ApplicationController
+  layout 'admin/application'
+end
+```
+
+*config/initializers/tramway.rb*
+```ruby
+Tramway.configure do |config|
+  config.application_controller = 'Admin::ApplicationController'
+end
+```
+
 ## Articles
 * [Tramway on Rails](https://kalashnikovisme.medium.com/tramway-on-rails-32158c35ed68)
+* [Tramway is the way to deal with little things for Rails developers](https://medium.com/@kalashnikovisme/tramway-is-the-way-to-deal-with-little-things-for-rails-developers-4f502172a18c)
 * [Delegating ActiveRecord methods to decorators in Rails](https://kalashnikovisme.medium.com/delegating-activerecord-methods-to-decorators-in-rails-4e4ec1c6b3a6)
 * [Behave as ActiveRecord. Why do we want objects to be AR lookalikes?](https://kalashnikovisme.medium.com/behave-as-activerecord-why-do-we-want-objects-to-be-ar-lookalikes-d494d692e1d3)
 * [Decorating associations in Rails with Tramway](https://kalashnikovisme.medium.com/decorating-associations-in-rails-with-tramway-b46a28392f9e)
+* [Easy-to-use Tailwind-styled multi-select built with Stimulus](https://medium.com/@kalashnikovisme/easy-to-use-tailwind-styled-multi-select-built-with-stimulus-b3daa9e307aa)
+* 
 
 ## Contributing
 

data/app/components/tailwinds/back_button_component.html.haml

@@ -0,0 +1,2 @@
+%a.btn.btn-delete.bg-orange-500.hover:bg-orange-700.text-white.font-bold.py-2.px-4.rounded.ml-2{ onclick: "window.history.back(); return false;", href: '#' }
+  = t('actions.back')

data/app/components/tailwinds/back_button_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  # Backbutton component
+  class BackButtonComponent < BaseComponent
+  end
+end

data/app/components/tailwinds/base_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  # Shared base component for Tailwinds components
+  class BaseComponent < Tramway::Component::Base
+  end
+end

data/app/components/tailwinds/button_component.html.haml

@@ -0,0 +1,12 @@
+- if text.present?
+  - if method == :get
+    = link_to text, path, class: classes, **options.except(:class)
+  - else
+    = button_to text, path, method:, class: classes, **options.except(:class)
+- else
+  - if method == :get
+    = link_to path, class: classes, **options.except(:class) do
+      = content
+  - else
+    = button_to path, method:, class: classes, **options.except(:class) do
+      = content

data/app/components/tailwinds/button_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  # Default Tramway button
+  #
+  class ButtonComponent < BaseComponent
+    option :text, optional: true, default: -> {}
+    option :path
+    option :color, default: -> { :blue }
+    option :type, default: -> { :default }
+    option :size, default: -> { :middle }
+    option :method, optional: true, default: -> { :get }
+    option :options, optional: true, default: -> { {} }
+
+    def size_classes
+      case size
+      when :small
+        'text-sm py-1 px-1'
+      when :middle
+        'py-2 px-4'
+      end
+    end
+
+    def classes
+      (default_classes +
+        light_mode_classes +
+        dark_mode_classes +
+        (method == :get ? %w[px-1 h-fit] : ['cursor-pointer'])).compact.join(' ')
+    end
+
+    def default_classes
+      [
+        'btn',
+        'btn-primary',
+        'font-bold',
+        'rounded-sm',
+        'flex',
+        'flex-row',
+        size_classes.to_s,
+        options[:class].to_s
+      ]
+    end
+
+    def light_mode_classes
+      [
+        "bg-#{color}-500",
+        "hover:bg-#{color}-700",
+        'text-white'
+      ]
+    end
+
+    def dark_mode_classes
+      [
+        "dark:bg-#{color}-600",
+        "dark:hover:bg-#{color}-800",
+        'dark:text-gray-300'
+      ]
+    end
+  end
+end

data/app/components/tailwinds/containers/narrow_component.html.haml

@@ -0,0 +1,3 @@
+.container.p-4.flex.align-center.justify-center.w-full.mx-auto.bg-gray-100.dark:bg-gray-900.text-gray-900.dark:text-white{ id: }
+  .flex.flex-col.justify-center.w-full.py-8.dark:text-white
+    = content

data/app/components/tailwinds/containers/narrow_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Containers
+    # Default page container in Tramway
+    class NarrowComponent < Tramway::Component::Base
+      option :id, optional: true, default: proc { SecureRandom.uuid }
+    end
+  end
+end

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

@@ -11,34 +11,33 @@ module Tailwinds
         @form_size = options[:size] || options['size'] || :middle
       end
 
-      def text_field(attribute, **options, &)
+      def common_field(component_name, input_method, attribute, **options, &)
         sanitized_options = sanitize_options(options)
 
-        render(Tailwinds::Form::TextFieldComponent.new(
-                 input: input(:text_field),
+        component_class = "Tailwinds::Form::#{component_name.to_s.camelize}Component".constantize
+
+        render(component_class.new(
+                 input: input(input_method),
                  value: get_value(attribute, sanitized_options),
                  **default_options(attribute, sanitized_options)
-               ), &)
+               ),
+               &)
       end
 
-      def number_field(attribute, **options, &)
-        sanitized_options = sanitize_options(options)
+      def text_field(attribute, **, &)
+        common_field(:text_field, :text_field, attribute, **, &)
+      end
 
-        render(Tailwinds::Form::NumberFieldComponent.new(
-                 input: input(:number_field),
-                 value: get_value(attribute, sanitized_options),
-                 **default_options(attribute, sanitized_options)
-               ), &)
+      def email_field(attribute, **, &)
+        common_field(:text_field, :email_field, attribute, **, &)
       end
 
-      def text_area(attribute, **options, &)
-        sanitized_options = sanitize_options(options)
+      def number_field(attribute, **, &)
+        common_field(:number_field, :number_field, attribute, **, &)
+      end
 
-        render(Tailwinds::Form::TextAreaComponent.new(
-                 input: input(:text_area),
-                 value: get_value(attribute, sanitized_options),
-                 **default_options(attribute, sanitized_options)
-               ), &)
+      def text_area(attribute, **, &)
+        common_field(:text_area, :text_area, attribute, **, &)
       end
 
       def password_field(attribute, **options, &)
@@ -95,7 +94,7 @@ module Tailwinds
       end
 
       def get_value(attribute, options)
-        options[:value] || object.public_send(attribute)
+        options[:value] || (object.present? ? object.public_send(attribute) : nil)
       end
 
       def default_options(attribute, options)

data/app/views/tramway/entities/_list.html.haml

@@ -17,12 +17,12 @@
     %p.text-center.mt-10
       You should fill class-level method `self.list_attributes` inside your
       = decorator
+  - else
+    = component 'tailwinds/table' do
+      = component 'tailwinds/table/header', headers: list_attributes.map { |attribute| @model_class.human_attribute_name(attribute) }
+      - @entities.each do |item|
+        = render 'tramway/entities/entity', entity: item
 
-  = component 'tailwinds/table' do
-    = component 'tailwinds/table/header', headers: list_attributes.map { |attribute| @model_class.human_attribute_name(attribute) }
-    - @entities.each do |item|
-      = render 'tramway/entities/entity', entity: item
-
-    - if Tramway.config.pagination[:enabled]
-      .flex.mt-4
-        = paginate @entities, custom_path_method: "#{@model_class.model_name.plural}_path"
+      - if Tramway.config.pagination[:enabled]
+        .flex.mt-4
+          = paginate @entities, custom_path_method: "#{@model_class.model_name.plural}_path"

data/app/views/tramway/entities/index.html.haml

@@ -1 +1,2 @@
-= render 'tramway/entities/list'
+= tramway_container do
+  = render 'tramway/entities/list'

data/config/tailwind.config.js

@@ -1,13 +1,25 @@
 module.exports = {
   safelist: [
+    // === Navbar ===
+    'ml-4',
+    
+    // === Custom table layout utilities ===
     'div-table',
     'div-table-row',
     'div-table-cell',
+    'sm:text-base',
+    'last:border-b-0',
+
+    // === Visibility and typography helpers ===
     'hidden',
+    'xl:hidden',
     'text-xl',
     'text-4xl',
     'font-bold',
-    'xl:hidden',
+    'text-right',
+
+    // === Grid templates used for configurable layouts ===
+    'grid',
     'grid-cols-1',
     'grid-cols-2',
     'grid-cols-3',
@@ -18,44 +30,112 @@ module.exports = {
     'grid-cols-8',
     'grid-cols-9',
     'grid-cols-10',
-    'text-right',
-    'w-2/3',
+
+    // === Page container and alignment helpers ===
+    'container',
+    'mx-auto',
+    'align-center',
+    'justify-center',
+
+    // === Flexbox layout utilities ===
     'flex',
-    'bg-purple-700',
+    'flex-col',
+    'flex-wrap',
+    'flex-row-reverse',
+    'flex-auto',
+    'flex-initial',
+    'justify-between',
+    'justify-end',
+    'space-x-1',
+    'items-center',
+
+    // === Responsive visibility helpers ===
+    'sm:hidden',
+    'sm:flex',
+
+    // === Sizing utilities ===
+    'w-2/3',
+    'w-full',
+    'w-fit',
+    'w-8',
+    'min-w-96',
+    'max-w-full',
+
+    // === Spacing utilities ===
+    'p-4',
     'px-6',
-    'px-3',
     'px-4',
+    'px-3',
+    'py-8',
     'py-4',
     'py-2',
     'mb-2',
-    'dark:placeholder-gray-400',
+    'mt-8',
+    'mt-2',
+
+    // === Pagination styles ===
+    'bg-white',
+    'rounded-md',
+    'hover:bg-purple-100',
+    'hover:bg-gray-100',
+    'hover:bg-gray-300',
+    'hover:text-gray-800',
+
+    // === Dark mode pagination styles ===
     'dark:text-white',
     'dark:bg-gray-800',
-    'dark:bg-gray-900',
     'dark:hover:bg-gray-700',
+    'dark:bg-gray-900',
     'dark:bg-gray-700',
     'dark:text-gray-400',
-    'dark:hover:bg-gray-700',
     'dark:hover:text-gray-400',
-    'ml-4',
-    'sm:text-base',
-    'sm:hidden',
-    'sm:flex',
-    'last:border-b-0',
-    'hover:bg-gray-100',
-    'hover:bg-gray-300',
-    'hover:text-gray-800',
-    'mt-8',
-    'justify-between',
-    'space-x-1',
-    'justify-end',
-    'mt-2',
+    'dark:placeholder-gray-400',
+
+    // === Button and badge helpers ===
+    'bg-purple-700',
+    'rounded',
+    'rounded-full',
+    'rounded-t',
+    'font-medium',
+    'font-normal',
+    'text-xs',
+
+    // === Form state helpers ===
     'disabled:bg-gray-100',
     'disabled:text-gray-400',
     'disabled:cursor-not-allowed',
-    // pagination
-    'bg-white', 'rounded-md', 'hover:bg-purple-100', 'dark:text-white', 'dark:bg-gray-800', 'dark:hover:bg-gray-700',
-    // multiselect styles
-    'absolute', 'shadow', 'top-11', 'z-40', 'w-full', 'lef-0', 'rounded', 'max-h-select', 'overflow-y-auto', 'cursor-pointer', 'rounded-t', 'border-b', 'hover:bg-teal-100', 'items-center', 'border-transparent', 'border-l-2,', 'relative', 'hover:border-teal-100', 'leading-6', 'bg-transparent', 'appearance-none', 'outline-none', 'h-full' , 'justify-center', 'm-1', 'font-medium', 'rounded-full', 'text-teal-700', 'bg-teal-100', 'border', 'border-teal-300', 'text-xs', 'font-normal', 'leading-none', 'max-w-full', 'flex-initial', 'flex-auto', 'flex-row-reverse',, 'flex-col', 'min-w-96', 'w-fit', 'flex-wrap', 'w-8', 'border-l',
+    'mb-4',
+    'bg-red-500',
+    'hover:bg-red-700',
+
+    // === Multiselect dropdown positioning ===
+    'absolute',
+    'relative',
+    'shadow',
+    'top-11',
+    'z-40',
+    'left-0',
+    'max-h-select',
+    'overflow-y-auto',
+    'cursor-pointer',
+
+    // === Multiselect option styling ===
+    'border-b',
+    'border',
+    'border-l',
+    'border-l-2',
+    'border-transparent',
+    'border-teal-300',
+    'hover:border-teal-100',
+    'bg-teal-100',
+    'bg-transparent',
+    'text-teal-700',
+    'leading-6',
+    'leading-none',
+    'appearance-none',
+    'outline-none',
+    'h-full',
+    'm-1',
+    'hover:bg-teal-100',
   ],
 }

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

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+require 'rails/generators'
+require 'fileutils'
+
+module Tramway
+  module Generators
+    # Running `rails generate tramway:install` will invoke this generator
+    #
+    class InstallGenerator < Rails::Generators::Base
+      desc 'Installs Tramway dependencies and Tailwind safelist configuration.'
+
+      def ensure_dependencies
+        missing_dependencies = gem_dependencies.reject do |dependency|
+          gemfile_contains?(dependency[:name])
+        end
+
+        return if missing_dependencies.empty?
+
+        append_to_file 'Gemfile', <<~GEMS
+
+          # Tramway dependencies
+          #{missing_dependencies.pluck(:declaration).join("\n")}
+
+        GEMS
+      end
+
+      def ensure_tailwind_safelist
+        return create_tailwind_config unless File.exist?(tailwind_config_path)
+
+        source_entries = extract_safelist_entries(File.read(gem_tailwind_config_path))
+        target_content = File.read(tailwind_config_path)
+        target_entries = extract_safelist_entries(target_content)
+
+        missing_entries = source_entries - target_entries
+        return if missing_entries.empty?
+
+        File.write(tailwind_config_path, insert_entries(target_content, missing_entries))
+      end
+
+      def ensure_tailwind_application_stylesheet
+        path = tailwind_application_stylesheet_path
+        FileUtils.mkdir_p(File.dirname(path))
+
+        return create_file(path, "#{tailwind_css_import_line}\n") unless File.exist?(path)
+
+        content = File.read(path)
+        return if content.include?(tailwind_css_import_line)
+
+        File.open(path, 'a') do |file|
+          file.write("\n") unless content.empty? || content.end_with?("\n")
+          file.write("#{tailwind_css_import_line}\n")
+        end
+      end
+
+      private
+
+      def gem_dependencies
+        @gem_dependencies ||= [
+          { name: 'haml-rails', declaration: 'gem "haml-rails"' },
+          { name: 'kaminari', declaration: 'gem "kaminari"' },
+          { name: 'view_component', declaration: 'gem "view_component"' },
+          { name: 'dry-initializer', declaration: "gem 'dry-initializer'" }
+        ]
+      end
+
+      def gemfile_path
+        @gemfile_path ||= File.join(destination_root, 'Gemfile')
+      end
+
+      def gemfile_contains?(name)
+        return false unless File.exist?(gemfile_path)
+
+        content = File.read(gemfile_path)
+        content.match?(/^\s*gem ['"]#{Regexp.escape(name)}['"]/)
+      end
+
+      def tailwind_config_path
+        @tailwind_config_path ||= File.join(destination_root, 'config/tailwind.config.js')
+      end
+
+      def gem_tailwind_config_path
+        @gem_tailwind_config_path ||= File.expand_path('../../../../config/tailwind.config.js', __dir__)
+      end
+
+      def tailwind_application_stylesheet_path
+        @tailwind_application_stylesheet_path ||= File.join(destination_root, 'app/assets/tailwind/application.css')
+      end
+
+      def tailwind_css_import_line
+        '@import "tailwindcss";'
+      end
+
+      def create_tailwind_config
+        create_file tailwind_config_path, File.read(gem_tailwind_config_path)
+      end
+
+      def extract_safelist_entries(content)
+        section = safelist_section(content)
+        return [] if section.nil?
+
+        section.scan(/'([^']+)'/).flatten.map(&:strip).reject(&:empty?).uniq
+      end
+
+      def safelist_section(content)
+        match = content.match(/safelist\s*:\s*\[(.*?)\]\s*,?/m)
+        match&.[](1)
+      end
+
+      def insert_entries(content, entries)
+        match = content.match(/safelist\s*:\s*\[(.*?)\](\s*,?)/m)
+        return content unless match
+
+        closing_index = match.begin(0) + match[0].rindex(']')
+        indentation = closing_indentation(content, closing_index)
+        formatted_entries = entries.map { |entry| "#{indentation}'#{entry}',\n" }.join
+
+        needs_leading_newline = content[closing_index - 1] != "\n"
+        insertion = String.new
+        insertion << "\n" if needs_leading_newline
+        insertion << formatted_entries
+
+        content.dup.insert(closing_index, insertion)
+      end
+
+      def closing_indentation(content, index)
+        line_start = content.rindex("\n", index - 1) || 0
+        line = content[line_start..index]
+        line[/^\s*/] || '  '
+      end
+    end
+  end
+end

data/lib/tramway/helpers/views_helper.rb

@@ -12,6 +12,45 @@ module Tramway
           &
         )
       end
+
+      def tramway_table(**options, &)
+        component 'tailwinds/table', options:, &
+      end
+
+      def tramway_row(**options, &)
+        component 'tailwinds/table/row',
+                  cells: options.delete(:cells),
+                  href: options.delete(:href),
+                  options:,
+                  &
+      end
+
+      def tramway_cell(&)
+        component 'tailwinds/table/cell', &
+      end
+
+      def tramway_button(path:, text: nil, method: :get, **options)
+        component 'tailwinds/button',
+                  text:,
+                  path:,
+                  method:,
+                  color: options.delete(:color),
+                  type: options.delete(:type),
+                  size: options.delete(:size),
+                  options:
+      end
+
+      def tramway_back_button
+        component 'tailwinds/back_button'
+      end
+
+      def tramway_container(id: nil, &)
+        if id.present?
+          component 'tailwinds/containers/narrow', id: id, &
+        else
+          component 'tailwinds/containers/narrow', &
+        end
+      end
     end
   end
 end

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 0.5.5.1
+  version: 0.6.0.1
 platform: ruby
 authors:
 - kalashnikovisme
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-10-23 00:00:00.000000000 Z
+date: 2025-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: anyway_config
@@ -143,6 +143,13 @@ files:
 - app/assets/javascripts/tramway/table_row_preview_controller.js
 - app/components/tailwind_component.html.haml
 - app/components/tailwind_component.rb
+- app/components/tailwinds/back_button_component.html.haml
+- app/components/tailwinds/back_button_component.rb
+- app/components/tailwinds/base_component.rb
+- app/components/tailwinds/button_component.html.haml
+- app/components/tailwinds/button_component.rb
+- app/components/tailwinds/containers/narrow_component.html.haml
+- app/components/tailwinds/containers/narrow_component.rb
 - app/components/tailwinds/form/builder.rb
 - app/components/tailwinds/form/file_field_component.html.haml
 - app/components/tailwinds/form/file_field_component.rb
@@ -214,6 +221,7 @@ files:
 - app/views/tramway/layouts/application.html.haml
 - config/routes.rb
 - config/tailwind.config.js
+- lib/generators/tramway/install/install_generator.rb
 - lib/kaminari/helpers/tag.rb
 - lib/rules/turbo_html_attributes_rules.rb
 - lib/tasks/tramway_tasks.rake