tramway 3.1.2.8 → 4.0

data/app/components/tramway/table/row_component.rb

@@ -6,9 +6,20 @@ module Tramway
     class RowComponent < Tramway::BaseComponent
       include ContentCells
 
-      DESKTOP_ROW_CLASSES = %w[
-        div-table-row grid grid-cols-1 gap-4 border-b border-zinc-800 bg-zinc-950 last:border-b-0
-      ].freeze
+      SIZE_CLASSES = {
+        small: {
+          row: 'div-table-row grid grid-cols-1 gap-2 border-b border-zinc-800 bg-transparent last:border-b-0',
+          cell: 'div-table-cell bg-transparent px-4 py-2 text-sm font-medium text-zinc-100 sm:text-sm'
+        },
+        medium: {
+          row: 'div-table-row grid grid-cols-1 gap-4 border-b border-zinc-800 bg-transparent last:border-b-0',
+          cell: 'div-table-cell bg-transparent px-6 py-4 text-xs font-medium text-zinc-100 sm:text-base'
+        },
+        large: {
+          row: 'div-table-row grid grid-cols-1 gap-6 border-b border-zinc-800 bg-transparent last:border-b-0',
+          cell: 'div-table-cell bg-transparent px-6 py-6 text-lg font-medium text-zinc-100'
+        }
+      }.freeze
 
       option :cells, optional: true, default: -> { [] }
       option :href, optional: true
@@ -32,7 +43,7 @@ module Tramway
       end
 
       def desktop_row_classes(cells_count)
-        (DESKTOP_ROW_CLASSES + ["md:grid-cols-#{cells_count}"]).join(' ')
+        "#{size_classes.fetch(:row)} md:grid-cols-#{cells_count}"
       end
 
       def link_row_classes
@@ -40,25 +51,31 @@ module Tramway
       end
 
       def cell_classes
-        'div-table-cell px-6 py-4 text-xs font-medium text-zinc-100 sm:text-base'
+        size_classes.fetch(:cell)
       end
 
       def around_render
         ensure_view_context_accessor
-        previous_flag = view_context.tramway_inside_cell
-        view_context.tramway_inside_cell = href.present?
+        context = tramway_table_context
+        previous_flag = context.tramway_inside_cell
+        context.tramway_inside_cell = href.present?
 
         yield
       ensure
-        view_context.tramway_inside_cell = previous_flag
+        context.tramway_inside_cell = previous_flag if context.respond_to?(:tramway_inside_cell=)
       end
 
       private
 
       def ensure_view_context_accessor
-        return if view_context.respond_to?(:tramway_inside_cell=)
+        context = tramway_table_context
+        return if context.respond_to?(:tramway_inside_cell=)
 
-        view_context.singleton_class.attr_accessor :tramway_inside_cell
+        context.singleton_class.attr_accessor :tramway_inside_cell
+      end
+
+      def size_classes
+        SIZE_CLASSES.fetch(tramway_table_size) { SIZE_CLASSES[:medium] }
       end
     end
   end

data/app/components/tramway/table_component.rb

@@ -3,10 +3,37 @@
 module Tramway
   # Table component for rendering a table
   class TableComponent < Tramway::BaseComponent
+    TABLE_SIZES = %i[small medium large].freeze
+
+    option :size, default: -> { :medium }
     option :options, optional: true, default: -> { {} }
 
     def table_classes
-      'div-table w-full text-left rtl:text-right text-zinc-100'
+      'div-table w-full bg-zinc-950 text-left rtl:text-right text-zinc-100'
+    end
+
+    def around_render
+      ensure_view_context_accessor
+      context = tramway_table_context
+      previous_size = context.tramway_table_size
+      context.tramway_table_size = normalized_size
+
+      yield
+    ensure
+      context.tramway_table_size = previous_size if context.respond_to?(:tramway_table_size=)
+    end
+
+    private
+
+    def normalized_size
+      TABLE_SIZES.include?(size) ? size : :medium
+    end
+
+    def ensure_view_context_accessor
+      context = tramway_table_context
+      return if context.respond_to?(:tramway_table_size=)
+
+      context.singleton_class.attr_accessor :tramway_table_size
     end
   end
 end

data/app/controllers/tramway/entities_controller.rb

@@ -28,7 +28,7 @@ module Tramway
 
     def show
       @record = tramway_decorate(
-        model_class.find(params[:id]),
+        model_class.find(params.expect(:id)),
         namespace: entity.namespace
       ).with(view_context:)
 
@@ -40,14 +40,14 @@ module Tramway
     end
 
     def edit
-      @record = tramway_form model_class.find(params[:id]), namespace: entity.namespace
+      @record = tramway_form model_class.find(params.expect(:id)), namespace: entity.namespace
     end
 
     # rubocop:disable Metrics/AbcSize
     def create
       @record = tramway_form model_class.new, namespace: entity.namespace
 
-      if @record.submit params[model_class.model_name.param_key]
+      if @record.submit params.require(model_class.model_name.param_key).permit!
         redirect_to Tramway::Engine.routes.url_helpers.public_send(entity.show_helper_method, @record.id),
                     notice: t('tramway.notices.created')
       else
@@ -56,9 +56,9 @@ module Tramway
     end
 
     def update
-      @record = tramway_form model_class.find(params[:id]), namespace: entity.namespace
+      @record = tramway_form model_class.find(params.expect(:id)), namespace: entity.namespace
 
-      if @record.submit params[model_class.model_name.param_key]
+      if @record.submit params.require(model_class.model_name.param_key).permit!
         redirect_to Tramway::Engine.routes.url_helpers.public_send(entity.show_helper_method, @record.id),
                     notice: t('tramway.notices.updated')
       else
@@ -68,7 +68,7 @@ module Tramway
     # rubocop:enable Metrics/AbcSize
 
     def destroy
-      @record = model_class.find(params[:id])
+      @record = model_class.find(params.expect(:id))
 
       @record.destroy
 

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

@@ -14,6 +14,7 @@
     %link{rel: "apple-touch-icon", href: "/icon.png"}
 
     = stylesheet_link_tag "tailwind", "data-turbo-track": "reload"
+    = stylesheet_link_tag "font-awesome", "data-turbo-track": "reload"
     = stylesheet_link_tag "trix", "data-turbo-track": "reload"
     = javascript_include_tag "trix", "data-turbo-track": "reload", defer: true
     = javascript_importmap_tags
@@ -21,10 +22,11 @@
   %body.bg-zinc-950.text-zinc-50
     = tramway_navbar title: 'Tramway'
 
-    - if flash.any?
-      = tramway_flash text: flash[:notice].presence || flash[:alert],
-        type: flash[:notice].present? ? :will : :rage,
-        id: 'flash-container'
+    = tramway_main_container id: 'tramway-main-container', class: 'md:pl-72 transition-[padding-left] duration-300 ease-in-out-strong motion-reduce:duration-0' do
+      - if flash.any?
+        = tramway_flash text: flash[:notice].presence || flash[:alert],
+          type: flash[:notice].present? ? :will : :rage,
+          id: 'flash-container'
 
-    .container.mx-auto.p-4.flex.align-center.justify-center
-      = yield
+      .container.mx-auto.p-4.flex.align-center.justify-center
+        = yield

data/config/routes.rb

@@ -2,7 +2,7 @@
 
 require 'tramway/helpers/routes_helper'
 
-# rubocop:disable Metrics/BlockLength
+# rubocop:disable-next Metrics/BlockLength
 Tramway::Engine.routes.draw do
   Tramway.config.entities.each do |entity|
     if entity.namespace.present?
@@ -55,7 +55,6 @@ Tramway::Engine.routes.draw do
     end
   end
 end
-# rubocop:enable Metrics/BlockLength
 
 Tramway::Engine.routes.routes.map(&:name).compact.each do |route_name|
   %w[path url].each do |suffix|

data/config/tailwind.config.js

@@ -1,5 +1,8 @@
 const defaultTheme = require("tailwindcss/defaultTheme")
 
+const buildUtilities = (prefix, start, end) =>
+  Array.from({ length: end - start + 1 }, (_, index) => `${prefix}${start + index}`)
+
 module.exports = {
   safelist: [
     // === Navbar ===
@@ -13,17 +16,52 @@ module.exports = {
     'md:translate-x-0',
     'border-white',
     'h-screen',
+    'h-dvh',
     'w-screen',
+    'w-72',
     'z-50',
     'inset-0',
+    'top-0',
     'top-4',
     'right-6',
+    'right-0',
     'text-4xl',
     'transition-transform',
     '-translate-x-full',
     'duration-300',
     'space-y-3',
     'md:justify-between',
+    'hidden',
+    'md:fixed',
+    'md:left-0',
+    'md:top-0',
+    'md:z-40',
+    'md:h-dvh',
+    'md:w-72',
+    'md:w-24',
+    'md:flex-col',
+    'md:hidden',
+    'md:border-r',
+    'md:border-zinc-800',
+    'md:bg-zinc-950',
+    'md:px-4',
+    'md:py-3',
+    'md:shadow-sm',
+    'md:backdrop-blur',
+    'md:overflow-hidden',
+    'md:pl-72',
+    'md:pl-24',
+    'transition-all',
+    'ease-in-out',
+    'md:transition-[width]',
+    'transition-[padding-left]',
+    'ease-in-out-strong',
+    'md:ease-in-out-strong',
+    'ease-out-strong',
+    'md:motion-reduce:duration-0',
+    'motion-reduce:duration-0',
+    'duration-200',
+    'rotate-180',
     'pt-16',
     'min-h-8',
     'bg-zinc-950',
@@ -55,6 +93,7 @@ module.exports = {
     'shadow-lg',
     'shadow-sm',
     'w-fit',
+    'text-xs',
     'text-base',
     'text-sm',
     'text-lg',
@@ -64,11 +103,23 @@ module.exports = {
     'border-r',
     'border-t',
     'border',
+    'border-dotted',
+    'border-zinc-700/50',
+    'border-zinc-100/60',
+    'box-border',
     'gap-4',
+    'gap-6',
     'gap-1',
     'gap-2',
     'grid-cols-1',
     'grid',
+    'overflow-auto',
+    'inset-x-0',
+    'inset-y-0',
+    ...buildUtilities('md:grid-cols-', 1, 12),
+    ...buildUtilities('md:grid-rows-', 1, 12),
+    ...buildUtilities('md:col-span-', 1, 12),
+    ...buildUtilities('md:row-span-', 1, 12),
     'px-4',
     'px-3',
     'py-3',
@@ -79,6 +130,7 @@ module.exports = {
     'inset-0',
     'top-4',
     'right-4',
+    'z-10',
     'flex-col',
     'items-center',
     'justify-between',
@@ -173,6 +225,7 @@ module.exports = {
     'sm:px-3',
     'sm:py-2',
     'sm:text-sm',
+    'sm:text-base',
     'md:gap-1',
     'md:space-y-4',
     'space-y-2',
@@ -651,6 +704,10 @@ module.exports = {
       fontFamily: {
         sans: ["Inter var", ...defaultTheme.fontFamily.sans],
       },
+      transitionTimingFunction: {
+        "out-strong": "cubic-bezier(0.23, 1, 0.32, 1)",
+        "in-out-strong": "cubic-bezier(0.77, 0, 0.175, 1)",
+      },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Tramway
+  module Generators
+    # nodoc
+    module InstallGeneratorFontAwesomeHelpers
+      private
+
+      def font_awesome_already_present?(content)
+        content.include?('stylesheet_link_tag "font-awesome"') ||
+          content.include?("stylesheet_link_tag 'font-awesome'")
+      end
+
+      def ensure_font_awesome_in_haml_layout
+        content = File.read(application_layout_haml_path)
+        return if font_awesome_already_present?(content)
+        return unless content.match?(/^\s+= stylesheet_link_tag "tailwind", "data-turbo-track": "reload"/)
+
+        updated = content.sub(
+          /^(\s+= stylesheet_link_tag "tailwind", "data-turbo-track": "reload"\n)/,
+          "\\1    = stylesheet_link_tag \"font-awesome\", \"data-turbo-track\": \"reload\"\n"
+        )
+        File.write(application_layout_haml_path, updated)
+      end
+
+      def ensure_font_awesome_in_erb_layout
+        content = File.read(application_layout_erb_path)
+        return if font_awesome_already_present?(content)
+        return unless content.include?('</head>')
+
+        updated = content.sub(
+          /(\s+<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>\n)/,
+          "\\1    <%= stylesheet_link_tag \"font-awesome\", \"data-turbo-track\": \"reload\" %>\n"
+        )
+        File.write(application_layout_erb_path, updated)
+      end
+    end
+  end
+end

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

@@ -2,12 +2,47 @@
 
 require 'rails/generators'
 require 'fileutils'
+require_relative 'font_awesome_helpers'
+require_relative 'layout_helpers'
 
 module Tramway
   module Generators
     # nodoc
-    # rubocop:disable Metrics/ModuleLength
+    # rubocop:disable-next Metrics/ModuleLength
     module InstallGeneratorHelpers
+      TAILWIND_SCROLLBAR_UTILITY = <<~CSS.chomp
+        @layer utilities {
+          .tramway-scrollbar {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(82, 82, 91, 0.9) rgba(9, 9, 11, 0.92);
+          }
+
+          .tramway-scrollbar::-webkit-scrollbar {
+            width: 0.5rem;
+          }
+
+          .tramway-scrollbar::-webkit-scrollbar-track {
+            background: rgba(9, 9, 11, 0.92);
+          }
+
+          .tramway-scrollbar::-webkit-scrollbar-thumb {
+            border-radius: 9999px;
+            background: rgba(82, 82, 91, 0.9);
+          }
+
+          .tramway-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: rgba(113, 113, 122, 0.95);
+          }
+
+          .tramway-scrollbar::-webkit-scrollbar-corner {
+            background: transparent;
+          }
+        }
+      CSS
+
+      TAILWIND_APPLICATION_STYLESHEET_CONTENT =
+        "@import \"tailwindcss\";\n\n#{TAILWIND_SCROLLBAR_UTILITY}\n".freeze
+
       private
 
       def gem_dependencies
@@ -78,12 +113,13 @@ module Tramway
 
       def stimulus_controller_imports
         [
-          'import { TramwaySelect, TableRowPreview, UiCheckbox, Tooltip } from "@tramway/tramway"'
+          'import { Navbar, TramwaySelect, TableRowPreview, UiCheckbox, Tooltip } from "@tramway/tramway"'
         ]
       end
 
       def stimulus_controller_registrations
         [
+          "application.register('tramway-navbar', Navbar)",
           "application.register('tramway-select', TramwaySelect)",
           "application.register('table-row-preview', TableRowPreview)",
           "application.register('ui--checkbox', UiCheckbox)",
@@ -95,28 +131,6 @@ 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/.'
@@ -134,15 +148,16 @@ module Tramway
       end
 
       def safelist_section(content)
-        match = content.match(/safelist\s*:\s*\[(.*?)\]\s*,?/m)
-        match&.[](1)
+        open_index, close_index = safelist_bracket_range(content)
+        return nil unless open_index
+
+        content[(open_index + 1)...close_index]
       end
 
       def insert_entries(content, entries)
-        match = content.match(/safelist\s*:\s*\[(.*?)\](\s*,?)/m)
-        return content unless match
+        _open_index, closing_index = safelist_bracket_range(content)
+        return content unless closing_index
 
-        closing_index = match.begin(0) + match[0].rindex(']')
         indentation = closing_indentation(content, closing_index)
         formatted_entries = entries.map { |entry| "#{indentation}'#{entry}',\n" }.join
 
@@ -154,6 +169,33 @@ module Tramway
         content.dup.insert(closing_index, insertion)
       end
 
+      # Finds the `[`/`]` pair that delimits the `safelist` array, ignoring brackets that
+      # appear inside quoted entries (e.g. `'md:transition-[width]'`) since a naive regex
+      # would otherwise stop at the first `]`, wherever it occurs.
+      def safelist_bracket_range(content)
+        start_index = content =~ /safelist\s*:\s*\[/
+        return [nil, nil] unless start_index
+
+        open_index = content.index('[', start_index)
+        close_index = matching_bracket_index(content, open_index)
+
+        [open_index, close_index]
+      end
+
+      def matching_bracket_index(content, open_index)
+        depth = 0
+
+        content[open_index..].to_enum(:scan, /'[^']*'|"[^"]*"|[\[\]]/).each do
+          token = Regexp.last_match[0]
+          next unless ['[', ']'].include?(token)
+
+          depth += token == '[' ? 1 : -1
+          return open_index + Regexp.last_match.end(0) - 1 if depth.zero?
+        end
+
+        nil
+      end
+
       def closing_indentation(content, index)
         line_start = content.rindex("\n", index - 1) || 0
         line = content[line_start..index]
@@ -171,30 +213,39 @@ module Tramway
         content.end_with?("\n") ? "\n" : "\n\n"
       end
 
-      # rubocop:disable Metrics/MethodLength
       def append_missing_imports(content)
         content = remove_legacy_stimulus_imports(content)
+        content = normalize_tramway_stimulus_imports(content)
         missing_imports = stimulus_controller_imports.reject { |line| content.include?(line) }
         return content if missing_imports.empty?
 
         import_lines = content.each_line.with_index.filter_map do |line, index|
           index if line.lstrip.start_with?('import ')
         end
-        insertion = "#{missing_imports.join("\n")}\n"
+        insert_missing_imports(content, missing_imports.join("\n"), import_lines)
+      end
+
+      def insert_missing_imports(content, imports, import_lines)
+        insertion = "#{imports}\n"
         updated = content.dup
 
-        if import_lines.any?
-          insertion_index = updated.lines[0..import_lines.max].join.length
-          updated.insert(insertion_index, insertion)
-        else
-          updated.prepend(insertion)
-        end
+        return updated.prepend(insertion) unless import_lines.any?
 
+        insertion_index = updated.lines[0..import_lines.max].join.length
+        updated.insert(insertion_index, insertion)
         updated
       end
-      # rubocop:enable Metrics/MethodLength
+
+      def normalize_tramway_stimulus_imports(content)
+        tramway_import_lines = content.each_line.select { |line| tramway_stimulus_import_line?(line) }
+        return content unless tramway_import_lines.any?
+        return content if normalized_tramway_import_lines?(tramway_import_lines)
+
+        content.each_line.reject { |line| tramway_stimulus_import_line?(line) }.join
+      end
 
       def append_missing_registrations(content)
+        content = normalize_tramway_stimulus_registrations(content)
         missing_registrations = stimulus_controller_registrations.reject { |line| content.include?(line) }
         return content if missing_registrations.empty?
 
@@ -221,6 +272,36 @@ module Tramway
         content.each_line.reject { |line| legacy_imports.include?(line.strip) }.join
       end
 
+      def tramway_stimulus_import_line?(line)
+        line.strip.match?(%r{^import \{.*\} from ["']@tramway/tramway["']$})
+      end
+
+      def normalize_tramway_stimulus_registrations(content)
+        tramway_registration_lines = content.each_line.select { |line| tramway_stimulus_registration_line?(line) }
+        return content if tramway_registration_lines.sort == stimulus_controller_registrations.sort
+        return content unless tramway_registration_lines.any?
+
+        content.each_line.reject { |line| tramway_stimulus_registration_line?(line) }.join
+      end
+
+      def tramway_stimulus_registration_line?(line)
+        tramway_registration_prefixes.any? { |prefix| line.strip.start_with?(prefix) }
+      end
+
+      def normalized_tramway_import_lines?(tramway_import_lines)
+        tramway_import_lines.one? && tramway_import_lines.first.strip == stimulus_controller_imports.first
+      end
+
+      def tramway_registration_prefixes
+        [
+          "application.register('tramway-navbar'",
+          "application.register('tramway-select'",
+          "application.register('table-row-preview'",
+          "application.register('ui--checkbox'",
+          "application.register('tramway-tooltip'"
+        ]
+      end
+
       def remove_legacy_importmap_pins(content)
         content.each_line.reject { |line| legacy_importmap_pins.include?(line.strip) }.join
       end
@@ -255,12 +336,12 @@ module Tramway
         say_status(:warning, "Skipping AGENTS.md update: #{e.message}")
       end
     end
-    # rubocop:enable Metrics/ModuleLength
 
-    # Running `rails generate tramway:install` will invoke this generator
-    #
+    # Installs Tramway dependencies and app wiring for a host Rails app.
     class InstallGenerator < Rails::Generators::Base
       include InstallGeneratorHelpers
+      include InstallGeneratorFontAwesomeHelpers
+      include InstallGeneratorLayoutHelpers
 
       desc 'Installs Tramway dependencies and Tailwind safelist configuration.'
 
@@ -310,15 +391,14 @@ module Tramway
         path = tailwind_application_stylesheet_path
         FileUtils.mkdir_p(File.dirname(path))
 
-        return create_file(path, "#{tailwind_css_import_line}\n") unless File.exist?(path)
+        return create_file(path, TAILWIND_APPLICATION_STYLESHEET_CONTENT) unless File.exist?(path)
 
         content = File.read(path)
-        return if content.include?(tailwind_css_import_line)
+        return if content.include?(tailwind_css_import_line) && content.include?(TAILWIND_SCROLLBAR_UTILITY)
 
-        File.open(path, 'a') do |file|
-          file.write("\n") unless content.empty? || content.end_with?("\n")
-          file.write("#{tailwind_css_import_line}\n")
-        end
+        updated = content.include?(tailwind_css_import_line) ? content : "#{content}\n#{tailwind_css_import_line}\n"
+        updated = "#{updated}\n#{TAILWIND_SCROLLBAR_UTILITY}\n" unless updated.include?(TAILWIND_SCROLLBAR_UTILITY)
+        File.write(path, updated)
       end
 
       def ensure_importmap_pin
@@ -348,30 +428,16 @@ module Tramway
 
       def ensure_trix_in_application_layout
         if File.exist?(application_layout_haml_path)
+          ensure_font_awesome_in_haml_layout
           ensure_trix_in_haml_layout
         elsif File.exist?(application_layout_erb_path)
+          ensure_font_awesome_in_erb_layout
           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)
+      def ensure_navbar_sidebar_offset_in_application_layout
+        ensure_navbar_sidebar_offset
       end
     end
   end