tramway 0.4.8 → 0.4.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e496f3ab6336d7f29b0b0021ef04b2bc18353ca3049406dd59671fbb8638d48f
-  data.tar.gz: 7863120a81d6195f4e60bcae4d24a43845a6a184621bfe10ecc4dfcb8c83ff4c
+  metadata.gz: 588137c9cafa9b3b22de988ed0593b5ad34bda6480919b99b6eb7899cd8efb14
+  data.tar.gz: dbd1ecd2af4158892bb2e517cb3c962143f4f1109a00b8f392eaae392ad42205
 SHA512:
-  metadata.gz: 374c6d983df5d172bf08e9f33fecb37abe192e4e6b8fd0a8863c3cd367f77206238abf05edfa7c0501919c860d90ee790fa16be721bc4c70adb2ad51245170fe
-  data.tar.gz: 6876ad8aef86197b3b56c64cc07eddfcc9943aaa504d20b3d970d55e2fe197df16d6b5d28876d63cee75bca26e287fcc2ed078e3e420c5958607eac27fe78abe
+  metadata.gz: 8f3a4841ba2bdbe9e5bb1a12ab10900b90d43b916534af3f33eb57e6be0a33ae88f6148f7c795d584f7a9ac7cadc7b7bc38b411f8ca6694b0a7d23153295f7d8
+  data.tar.gz: 215ba73a338b8ab3d30b923696bb9cc22f189f9c8f1858c2e2a6cec0ce388e4fb4f30fee0345deaab19677416810f35935fa62b658b2c8f6b176e0d02da5a337

data/README.md

@@ -8,7 +8,9 @@ Unite Ruby on Rails brilliance. Streamline development with Tramway.
   * [Tramway Form](https://github.com/Purple-Magic/tramway#tramway-form)
   * [Tramway Navbar](https://github.com/Purple-Magic/tramway#tramway-navbar)
   * [Tailwind-styled forms](https://github.com/Purple-Magic/tramway#tailwind-styled-forms)
+    * [Stimulus-based inputs](https://github.com/Purple-Magic/tramway#stimulus-based-inputs)
   * [Tailwind-styled pagination](https://github.com/Purple-Magic/tramway?tab=readme-ov-file#tailwind-styled-pagination-for-kaminari)
+* [Articles](https://github.com/Purple-Magic/tramway#usage)
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -421,10 +423,11 @@ 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.new do |f|
+= 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"
 ```
@@ -436,8 +439,42 @@ Available form helpers:
 * password_field
 * file_field
 * select
+* multiselect ([Stimulus-based](https://github.com/Purple-Magic/tramway#stimulus-based-inputs))
 * submit
 
+#### Stimulus-based inputs
+
+`tramway_form_for` provides Tailwind-styled Stimulus-based custom inputs.
+
+##### Multiselect
+
+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']]
+  #- ...
+```
+
+you should add Tramway Multiselect Stimulus controller to your application.
+
+Example for [importmap-rails](https://github.com/rails/importmap-rails) config
+
+*config/importmap.rb*
+```ruby
+pin '@tramway/multiselect', to: 'tramway/multiselect_controller.js'
+```
+
+*app/javascript/controllers/index.js*
+```js
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+import { Multiselect } from "@tramway/multiselect" // importing Multiselect controller class
+eagerLoadControllersFrom("controllers", application)
+
+application.register('multiselect', Multiselect) // register Multiselect controller class as `multiselect` stimulus controller
+```
+
 ### 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).
@@ -480,6 +517,12 @@ user_2 = tramway_form User.first
 user_2.object #=> returns pure user object
 ```
 
+## Articles
+* [Tramway on Rails](https://kalashnikovisme.medium.com/tramway-on-rails-32158c35ed68)
+* [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)
+
 ## Contributing
 
 Install [lefthook](https://github.com/evilmartians/lefthook)

data/app/assets/javascripts/tramway/multiselect_controller.js

@@ -0,0 +1,131 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class Multiselect extends Controller {
+  static targets = ["dropdown", "showSelectedArea", "hiddenInput"];
+
+  static values = {
+    items: Array,
+    dropdownContainer: String,
+    itemContainer: String,
+    selectedItemTemplate: String,
+    dropdownState: String,
+    selectedItems: Array,
+    placeholder: String,
+    selectAsInput: String,
+    value: Array
+  }
+
+  connect() {
+    this.dropdownState = 'closed';
+    this.unselectedItems = JSON.parse(this.element.dataset.items).map((item) => {
+      return {
+        text: item.text,
+        value: item.value.toString()
+      }
+    });
+
+    const initialValues = this.element.dataset.value === undefined ? [] : this.element.dataset.value.split(',')
+    this.selectedItems = this.unselectedItems.filter(item => initialValues.includes(item.value));
+    this.unselectedItems = this.unselectedItems.filter(item => !initialValues.includes(item.value));
+
+    this.renderSelectedItems();
+  }
+
+  renderSelectedItems() {
+    const allItems = this.fillTemplate(this.element.dataset.selectedItemTemplate, this.selectedItems);
+    this.showSelectedAreaTarget.innerHTML = allItems;
+    this.showSelectedAreaTarget.insertAdjacentHTML("beforeEnd", this.input());
+    this.updateInputOptions();
+  }
+
+  fillTemplate(template, items) {
+    return items.map((item) => {
+      return template.replace(/{{text}}/g, item.text).replace(/{{value}}/g, item.value)
+    }).join('')
+  }
+
+  closeOnClickOutside(event) {
+    if (this.dropdownState === 'open' && !this.element.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
+
+  toggleDropdown() {
+    if (this.dropdownState === 'closed') {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  rerenderItems() {
+    this.closeDropdown();
+    this.openDropdown();
+  }
+
+  openDropdown() {
+    this.dropdownState = 'open';
+    this.dropdownTarget.insertAdjacentHTML("afterend", this.template);
+
+    if (this.dropdown()) {
+      this.dropdown().addEventListener('click', event => event.stopPropagation());
+    }
+  }
+
+  dropdown() {
+    return this.element.querySelector('#dropdown');
+  }
+
+  closeDropdown() {
+    this.dropdownState = 'closed';
+    if (this.dropdown()) {
+      this.dropdown().remove();
+    }
+  }
+
+  get template() {
+    return this.element.dataset.dropdownContainer.replace(
+      /{{content}}/g,
+      this.fillTemplate(this.element.dataset.itemContainer, this.unselectedItems)
+    );
+  }
+
+  toggleItem({ currentTarget }) {
+    const item = {
+      text: currentTarget.dataset.text,
+      value: currentTarget.dataset.value
+    };
+
+    const itemIndex = this.selectedItems.findIndex(x => x.value === item.value);
+    if (itemIndex !== -1) {
+      this.selectedItems = this.selectedItems.filter((_, index) => index !== itemIndex);
+    } else {
+      this.selectedItems.push(item);
+    }
+
+    this.unselectedItems = this.unselectedItems.filter(x => x.value !== item.value);
+
+    this.renderSelectedItems();
+    this.rerenderItems();
+  }
+
+  input() {
+    const placeholder = this.selectedItems.length > 0 ? '' : this.element.dataset.placeholder;
+    return this.element.dataset.selectAsInput.replace(/{{placeholder}}/g, placeholder);
+  }
+
+  updateInputOptions() {
+    this.hiddenInputTarget.innerHTML = '';
+    this.selectedItems.forEach(selected => {
+      const option = document.createElement("option");
+      option.text = selected.text;
+      option.value = selected.value;
+      option.setAttribute("selected", true);
+      this.hiddenInputTarget.append(option);
+    });
+
+    this.hiddenInputTarget.value = this.selectedItems.map(item => item.value);
+  }
+}
+
+export { Multiselect }

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

@@ -35,8 +35,17 @@ module Tailwinds
                ), &)
       end
 
-      def submit(action, **options, &)
-        render(Tailwinds::Form::SubmitButtonComponent.new(action, **options), &)
+      def multiselect(attribute, collection, **options, &)
+        render(Tailwinds::Form::MultiselectComponent.new(
+                 input: input(:text_field),
+                 value: options[:value] || options[:selected] || object.public_send(attribute)&.first,
+                 collection:,
+                 **default_options(attribute, options)
+               ), &)
+      end
+
+      def submit(action, **, &)
+        render(Tailwinds::Form::SubmitButtonComponent.new(action, **), &)
       end
 
       private

data/app/components/tailwinds/form/multiselect/dropdown_container.html.haml

@@ -0,0 +1,3 @@
+#dropdown.absolute.shadow.top-100.bg-white.z-40.w-full.lef-0.rounded.max-h-select.overflow-y-auto{ data: { action: "click@window->multiselect#closeOnClickOutside" } }
+  .flex.flex-col.w-full
+    {{content}}

data/app/components/tailwinds/form/multiselect/dropdown_container.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Container for dropdown component
+      class DropdownContainer < ViewComponent::Base
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect/item_container.html.haml

@@ -0,0 +1,5 @@
+.cursor-pointer.w-full.border-gray-100.rounded-t.border-b.hover:bg-teal-100{ data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
+  .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.relative.hover:border-teal-100
+    .w-full.items-center.flex
+      .mx-2.leading-6
+        {{text}}

data/app/components/tailwinds/form/multiselect/item_container.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Container for item in dropdown component
+      class ItemContainer < ViewComponent::Base
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect/select_as_input.html.haml

@@ -0,0 +1,2 @@
+.flex-1
+  = @input.call(@attribute, @options.merge(placeholder: "{{placeholder}}", class: "bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800 hidden", data: { 'multiselect-target' => 'hiddenInput' }))

data/app/components/tailwinds/form/multiselect/select_as_input.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Renders input as select
+      class SelectAsInput < ViewComponent::Base
+        extend Dry::Initializer[undefined: false]
+
+        option :options
+        option :attribute
+        option :input
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect/selected_item_template.html.haml

@@ -0,0 +1,6 @@
+.flex.justify-center.items-center.m-1.font-medium.py-1.px-2.bg-white.rounded-full.text-teal-700.bg-teal-100.border.border-teal-300
+  .text-xs.font-normal.leading-none.max-w-full.flex-initial
+    {{text}}
+  .flex.flex-auto.flex-row-reverse
+    .cursor-pointer{ data: { action: "click->multiselect#toggleItem", text: "{{text}}", value: "{{value}}" } }
+      ⨯

data/app/components/tailwinds/form/multiselect/selected_item_template.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    module Multiselect
+      # Tailwind-styled multi-select field
+      class SelectedItemTemplate < ViewComponent::Base
+      end
+    end
+  end
+end

data/app/components/tailwinds/form/multiselect_component.html.haml

@@ -0,0 +1,10 @@
+.mb-4
+  - if @label
+    %label.block.text-gray-700.text-sm.font-bold.mb-2{ for: @for }
+      = @label
+  .flex.flex-col.items-center.relative{ data: multiselect_hash, id: "#{@for}_multiselect" }
+    .min-w-96.w-fit
+      .p-1.flex.border.border-gray-200.bg-white.rounded{ data: { "multiselect-target" => "dropdown" } }
+        .flex.flex-auto.flex-wrap{ data: { "multiselect-target" => "showSelectedArea" } }
+        .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200
+          ^

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

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Tailwinds
+  module Form
+    # Tailwind-styled multi-select field
+    class MultiselectComponent < TailwindComponent
+      option :collection
+
+      def before_render
+        @collection = collection.map do |(text, value)|
+          { text:, value: }
+        end.to_json
+      end
+
+      def multiselect_hash
+        {
+          controller:, selected_item_template:, multiselect_selected_items_value:, dropdown_container:, item_container:,
+          items:, action:, select_as_input:, placeholder:, value:
+        }.transform_keys { |key| key.to_s.gsub('_', '-') }
+      end
+
+      private
+
+      def controller
+        :multiselect
+      end
+
+      def action
+        'click->multiselect#toggleDropdown'
+      end
+
+      def items
+        collection
+      end
+
+      def placeholder
+        options[:placeholder]
+      end
+
+      def multiselect_selected_items_value
+        []
+      end
+
+      def select_as_input
+        render(Tailwinds::Form::Multiselect::SelectAsInput.new(options:, attribute:, input:))
+      end
+
+      def method_missing(method_name, *, &)
+        component = component_name(method_name)
+
+        if method_name.to_s.include?('_') && Object.const_defined?(component)
+          render(component.constantize.new(*, &))
+        else
+          super
+        end
+      end
+
+      def respond_to_missing?(method_name, include_private = false)
+        if method_name.to_s.include?('_') && Object.const_defined?(component_name(method_name))
+          true
+        else
+          super
+        end
+      end
+
+      # :reek:UtilityFunction { enabled: false }
+      def component_name(method_name)
+        "Tailwinds::Form::Multiselect::#{method_name.to_s.camelize}"
+      end
+      # :reek:UtilityFunction { enabled: true }
+    end
+  end
+end

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

@@ -2,7 +2,7 @@
 
 module Tailwinds
   module Form
-    # Tailwind-styled text field
+    # Tailwind-styled select field
     class SelectComponent < TailwindComponent
       option :collection
     end

data/config/routes.rb

@@ -1,4 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Lint/EmptyBlock
 Tramway::Engine.routes.draw do
 end
+# rubocop:enable Lint/EmptyBlock

data/lib/rules/turbo_html_attributes_rules.rb

@@ -8,7 +8,7 @@ module Rules
       options.reduce({}) do |hash, (key, value)|
         case key
         when :method, :confirm
-          hash.deep_merge data: { "turbo_#{key}".to_sym => value }
+          hash.deep_merge data: { "turbo_#{key}": value }
         else
           hash.merge key => value
         end

data/lib/tramway/configs/entity.rb

@@ -9,18 +9,25 @@ module Tramway
       attribute :name, Types::Coercible::String
       attribute? :route, Tramway::Configs::Entities::Route
 
+      # Route Struct contains implemented in Tramway CRUD and helpful routes for the entity
+      RouteStruct = Struct.new(:index)
+
+      # HumanNameStruct contains human names forms for the entity
+      HumanNameStruct = Struct.new(:single, :plural)
+
       def routes
-        OpenStruct.new index: Rails.application.routes.url_helpers.public_send(route_helper_method)
+        RouteStruct.new(Rails.application.routes.url_helpers.public_send(route_helper_method))
       end
 
       def human_name
-        options = if model_class.present?
-                    model_name = model_class.model_name.human
-                    { single: model_name, plural: model_name.pluralize }
-                  else
-                    { single: name.capitalize, plural: name.pluralize.capitalize }
-                  end
-        OpenStruct.new(**options)
+        single, plural = if model_class.present?
+                           model_name = model_class.model_name.human
+                           [model_name, model_name.pluralize]
+                         else
+                           [name.capitalize, name.pluralize.capitalize]
+                         end
+
+        HumanNameStruct.new(single, plural)
       end
 
       private

data/lib/tramway/engine.rb

@@ -14,6 +14,10 @@ module Tramway
       configure_pagination if Tramway.config.pagination[:enabled]
     end
 
+    initializer 'tramway.assets.precompile' do |app|
+      app.config.assets.precompile += %w[tramway/multiselect.js]
+    end
+
     private
 
     def load_navbar_helper

data/lib/tramway/helpers/navbar_helper.rb

@@ -27,7 +27,7 @@ module Tramway
         navbar_items.each do |(key, value)|
           key_to_merge = case key
                          when :left, :right
-                           "#{key}_items".to_sym
+                           :"#{key}_items"
                          else
                            key
                          end

data/lib/tramway/helpers/views_helper.rb

@@ -4,8 +4,8 @@ module Tramway
   module Helpers
     # Provides view-oriented helpers for ActionView
     module ViewsHelper
-      def tramway_form_for(object, *args, **options, &)
-        form_for(object, *args, **options.merge(builder: Tailwinds::Form::Builder), &)
+      def tramway_form_for(object, *, **options, &)
+        form_for(object, *, **options.merge(builder: Tailwinds::Form::Builder), &)
       end
     end
   end

data/lib/tramway/navbar.rb

@@ -33,13 +33,13 @@ module Tramway
       reset_filling
     end
 
-    def item(text_or_url, url = nil, **options, &block)
-      raise 'You cannot provide an argument and a code block at the same time' if provided_url_and_block?(url, &block)
+    def item(text_or_url, url = nil, **, &)
+      raise 'You cannot provide an argument and a code block at the same time' if provided_url_and_block?(url, &)
 
       rendered_item = if url.present?
-                        render_ignoring_block(text_or_url, url, **options)
+                        render_ignoring_block(text_or_url, url, **)
                       else
-                        render_using_block(text_or_url, **options, &block)
+                        render_using_block(text_or_url, **, &)
                       end
 
       @items[@filling] << rendered_item
@@ -79,13 +79,13 @@ module Tramway
       end
     end
 
-    def render_using_block(text_or_url, method: nil, **options, &block)
+    def render_using_block(text_or_url, method: nil, **options, &)
       options.merge!(href: text_or_url)
 
       if method.present? && method.to_sym != :get
-        context.render(Tailwinds::Nav::Item::ButtonComponent.new(method:, **options), &block)
+        context.render(Tailwinds::Nav::Item::ButtonComponent.new(method:, **options), &)
       else
-        context.render(Tailwinds::Nav::Item::LinkComponent.new(method:, **options), &block)
+        context.render(Tailwinds::Nav::Item::LinkComponent.new(method:, **options), &)
       end
     end
   end

data/lib/tramway/utils/render.rb

@@ -5,8 +5,8 @@ module Tramway
     # Provides helper method render that depends on ActionController::Base.render method
     #
     module Render
-      def render(*args, &)
-        ActionController::Base.render(*args, &)
+      def render(*, &)
+        ActionController::Base.render(*, &)
       end
     end
   end

data/lib/tramway/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 0.4.8
+  version: 0.4.9.1
 platform: ruby
 authors:
 - kalashnikovisme
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-08 00:00:00.000000000 Z
+date: 2024-09-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dry-struct
@@ -67,20 +67,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: rspec-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 description: Tramway Rails Engine
 email:
 - kalashnikovisme@gmail.com
@@ -91,11 +77,22 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/tramway/multiselect_controller.js
 - app/components/tailwind_component.html.haml
 - app/components/tailwind_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
+- app/components/tailwinds/form/multiselect/dropdown_container.html.haml
+- app/components/tailwinds/form/multiselect/dropdown_container.rb
+- app/components/tailwinds/form/multiselect/item_container.html.haml
+- app/components/tailwinds/form/multiselect/item_container.rb
+- app/components/tailwinds/form/multiselect/select_as_input.html.haml
+- app/components/tailwinds/form/multiselect/select_as_input.rb
+- app/components/tailwinds/form/multiselect/selected_item_template.html.haml
+- app/components/tailwinds/form/multiselect/selected_item_template.rb
+- app/components/tailwinds/form/multiselect_component.html.haml
+- app/components/tailwinds/form/multiselect_component.rb
 - app/components/tailwinds/form/select_component.html.haml
 - app/components/tailwinds/form/select_component.rb
 - app/components/tailwinds/form/submit_button_component.html.haml