Fix/component imports railtie (#3)

* fix module names

* add turbo-rails dependency

* add main_component

* cap view_component version

* add require statements

* add railtie

* remove comments from railtie.rb

* remove unnecessary requires

* happy rubocop

* various updates

* Update category_component.rb

* remove commented requires

* update heroicon to 2.0

* setup js

* add tailwindcss-rails gem dependency

* add view require

* Revert "add view require"

This reverts commit 45d2ec7.

* white -> medium gray

* fix indentation

* Revert "fix indentation"

This reverts commit 2b478c0.

* add log statements

* Delete .vscode/diff directory

* add require

* remove logs

* remove comment and whitespace

* use ruby platform

* typo

* Create sn_filterable-0.1.0.gem

* add view_component require to railtie.rb

* remove view_component require

* add view_component require

* require view_component/base

* add /all requirement

* Revert "add /all requirement"

This reverts commit 3e2b4af.

* move require into SnFItlerable module

* remove /base require

* reduce spec.files scope

* Update version.rb

* Update Gemfile.lock

* add require view_component to railtie.rb

* Fix/replicate polaris (#7)

* move components to app

* Move component loading to engine

* add view_component/engine require to engine

* Revert "add view_component/engine require to engine"

This reverts commit 797d977.

* Revert "Merge branch 'fix/replicate-polaris' of https://github.com/ibm-skills-network/sn_filterable into fix/replicate-polaris"

This reverts commit 3213ee4, reversing
changes made to 797d977.

* Revert "Revert "add view_component/engine require to engine""

This reverts commit 2e3e9b7.

* add comoponents/sn_filterable sub folder

* fix namespace mismatches

* remove BaseComponents namespace from FilterButtonComponent

* precompile js

* Revert "precompile js"

This reverts commit 90020e0.

* add js to autoload paths

* Revert "add js to autoload paths"

This reverts commit 06d81e7.

* add load_js

* load_js -> self.load_js

* Update README.md

* Add implementation steps

* rubocop adjustments

* Add testing details to readme

* adjust readme code format

* update readme gemfile install instructions

* Update README.md

* add demo gif

* change bundle install format

* grammatical readme adjustments

* Add search bar usage instructions

* update table rendering in readme

* Add sort too readme usage

* Update README.md

* Update README.md

Author: chasemcdo

.vscode/diff/vulsCount.txt

@@ -1,11 +1,13 @@
 PATH
   remote: .
   specs:
-    sn_filterable (0.1.0)
+    sn_filterable (0.1.1)
       heroicon
       kaminari
       pg
       pg_search
+      tailwindcss-rails
+      turbo-rails
       view_component
 
 GEM
@@ -74,6 +76,7 @@ GEM
     builder (3.2.4)
     concurrent-ruby (1.1.10)
     crass (1.0.6)
+    date (3.3.1)
     diff-lcs (1.5.0)
     erubi (1.11.0)
     factory_bot (6.2.1)
@@ -113,19 +116,20 @@ GEM
     marcel (1.0.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
+    mini_portile2 (2.8.0)
     minitest (5.16.3)
-    net-imap (0.3.1)
+    net-imap (0.3.2)
+      date
       net-protocol
     net-pop (0.1.2)
       net-protocol
-    net-protocol (0.2.0)
+    net-protocol (0.2.1)
       timeout
     net-smtp (0.3.3)
       net-protocol
     nio4r (2.5.8)
-    nokogiri (1.13.10-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.13.10-x86_64-linux)
+    nokogiri (1.13.10)
+      mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     parallel (1.22.1)
     parser (3.1.3.0)
@@ -218,12 +222,18 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    tailwindcss-rails (2.0.21)
+      railties (>= 6.0.0)
     thor (1.2.1)
     timeout (0.3.1)
+    turbo-rails (1.3.2)
+      actionpack (>= 6.0.0)
+      activejob (>= 6.0.0)
+      railties (>= 6.0.0)
     tzinfo (2.0.5)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.3.0)
-    view_component (2.78.0)
+    view_component (2.79.0)
       activesupport (>= 5.0.0, < 8.0)
       concurrent-ruby (~> 1.0)
       method_source (~> 1.0)
@@ -235,9 +245,7 @@ GEM
     zeitwerk (2.6.6)
 
 PLATFORMS
-  x86_64-darwin-20
-  x86_64-darwin-21
-  x86_64-linux
+  ruby
 
 DEPENDENCIES
   factory_bot_rails

Gemfile.lock

@@ -1,38 +1,148 @@
 # SnFilterable
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/sn_filterable`. To experiment with that code, run `bin/console` for an interactive prompt.
+Welcome to the Skills Network Filterable gem!
 
-TODO: Delete this and the text above, and describe your gem
+This gem provides a method for developers to quickly implement a customizable search and filter for their data with live-reloading.
+
+Live examples of the gem's use can be viewed at [Skills Network's Author Workbench](https://author.skills.network), primarily under the [organizations tab](https://author.skills.network/organizations)
+
+![](sn_filterable_demo.gif)
+
+## Requirements
+
+There are a couple key requirements for your app to be compatible with this gem:
+
+1. You need to have [AlpineJS](https://alpinejs.dev/essentials/installation) loaded into the page where you plan to use SnFilterable
+2. Your app needs to be running [TailwindCSS](https://tailwindcss.com/docs/guides/ruby-on-rails)
 
 ## Installation
 
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'sn_filterable'
+gem "sn_filterable", git: "https://github.com/ibm-skills-network/sn_filterable.git"
 ```
 
 And then execute:
+```bash
+bundle install
+```
+
+##### Make the following adjustments to your codebase
+
+1. Add the necessary translations and customize as desired
+```yaml
+# en.yml
+en:
+    # Other translations
+    shared:
+        filterable:
+        view_filter_button: "View filters"
+        results_per_page: "Results per page"
+        clear_all: "Clear all"
+        pagination:
+            previous_page: "Previous"
+            next_page: "Next"
+```
 
-    $ bundle install
+2. Require the necessary JavaScript (dependent on AlpineJS being included with your App)
+```javascript
+// application.js converted to application.js.erb
 
-Or install it yourself as:
+// other imports
+<%= SnFilterable.load_js %>
+```
 
-    $ gem install sn_filterable
+3. Configure your app's Tailwind to scan the gem
+```javascript
+// tailwind.config.js
+const execSync = require('child_process').execSync;
+const output = execSync('bundle show sn_filterable', { encoding: 'utf-8' });
+
+module.exports = {
+  // other config settings
+  content: [
+    // other content
+    output.trim() + '/app/**/*.{erb,rb}'
+  ]
+  // other config settings
+};
+```
 
 ## Usage
 
-TODO: Write usage instructions here
 
-## Development
+##### The MainComponent: Search Bar and sidebar
+
+The MainComponent is what is demo'd in the introduction. It consists of the search bar and a sidebar for filters.
+
+If you only wish to use the Search bar an optional `show_sidebar: false` parameter can be passed to `SnFilterable::MainComponent` in the view.
+
+There are three components which work to provide the text search functionality:
+
+1. Filters in the given model:
+```ruby
+# model.rb
+class Model < ApplicationRecord
+    include SnFilterable::Filterable
+
+    FILTER_SCOPE_MAPPINGS = {
+        "search_name": :filter_by_name
+        # 'search_name' will be referenced from the view
+    }.freeze
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+    SORT_SCOPE_MAPPINGS = {
+        "sort_name": :sort_by_name
+        # 'sort_name' will be referenced from the controller
+    }.freeze
+
+    scope :filter_by_name, ->(search) { where(SnFilterable::WhereHelper.contains("name", search)) }
+    scope :sort_by_name, -> { order :name }
+    # 'name' is a string column defined on the Model
+
+    # Model code...
+end
+```
+
+2. Setting up the controller
+* While `:default_sort` is an optional parameter it is recommended
+```ruby
+# models_controller.rb
+@search = Model.filter(params:, default_sort: ["sort_name", :asc].freeze)
+@models = @search.items
+```
+
+3. Rendering the ViewComponent
+```html
+<%= render SnFilterable::MainComponent.new(frame_id: "some_unique_id", filtered: @search, filters: [], search_filter_name: "search_name") do %>
+    <% @models.each do |model| %>
+        <%= model.name %>
+    <% end %>
+    <%= filtered_paginate @search %> # Kaminari Gem Pagination
+<% end %>
+```
+
+## Testing / Development
+
+This gem using [RSpec](https://rspec.info) for testing. Tests can be running locally by first setting up the dummy database/app as follows:
+
+```bash
+docker compose up -d
+cd spec/dummy
+rails db:create
+rails db:schema:load
+```
+
+
+Now the test suite can be run from the project root using 
+```bash
+bundle exec rspec
+```
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/sn_filterable.
+Bug reports and pull requests are welcome on [GitHub](https://github.com/ibm-skills-network/sn_filterable).
 
 ## License
 

README.md

@@ -0,0 +1,63 @@
+document.addEventListener("alpine:init", () => {
+  Alpine.data("filteringSearchInput", (searchKey) => ({
+    currentTimeout: null,
+    hasValue: false,
+    onInit: function () {
+      this.onValueUpdate()
+    },
+    onUpdate: function (force) {
+      this.clearTimeout();
+      this.onValueUpdate();
+
+      this.$data.currentTimeout = setTimeout(() => {
+        this.$data.currentTimeout = null;
+
+        this.$data.filteringForm.requestSubmit();
+      }, force ? 0 : 500);
+    },
+    onValueUpdate: function () {
+      this.$data.hasValue = this.$el.value.length > 0;
+    },
+    clearTimeout: function () {
+      if (this.$data.currentTimeout != null) {
+        clearInterval(this.$data.currentTimeout);
+        this.$data.currentTimeout = null;
+      }
+    }
+  }));
+  Alpine.data("filteringChipContainer", () => ({
+    updateSidebarGap: function () {
+      this.$data.sidebarGapTarget.style.paddingTop = `${this.$el.clientHeight}px`;
+    }
+  }));
+  Alpine.data("filteringChip", (filter) => ({
+    onClick: function (chipElem) {
+      const inputElem = this.$data.filteringForm.querySelector(`input[data-filter-name=${JSON.stringify(filter.parent)}][value=${JSON.stringify(filter.value)}]`);
+      if (filter.multi) {
+        inputElem.click()
+      } else {
+        inputElem.checked = false;
+        this.$data.filteringForm.requestSubmit();
+      }
+
+      if (this.$el.closest(".app-filter-chips-container").children.length == 1) {
+        this.$el.closest(".app-filter-chips-content").remove();
+      } else {
+        this.$el.closest(".app-filter-chip").remove();
+      }
+
+      this.$data.updateSidebarGap();
+    }
+  }));
+  Alpine.data("filteringClear", (filter) => ({
+    onClick: function (chipElem) {
+      const chips = Array.from(this.$data.entireComponenet.querySelector(".app-filter-chips-container").querySelectorAll(".app-filter-chip"));
+
+      for (const chip of chips) {
+        chip.querySelector("a").click();
+      }
+
+      this.$el.closest(".app-filter-chips-content").remove();
+    }
+  }));
+});

app/assets/javascripts/sn_filtering.js

@@ -2,7 +2,7 @@
 require "view_component"
 require "rails"
 
-class BaseComponent < ViewComponent::Base
+class SnFilterable::BaseComponents::BaseComponent < ViewComponent::Base
   include ClassNameHelper
   include FetchOrFallbackHelper
 

lib/sn_filterable/base_components/base_component.rb renamed to app/components/sn_filterable/base_components/base_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 require_relative "base_component"
 
-class ButtonComponent < BaseComponent
+class SnFilterable::BaseComponents::ButtonComponent < SnFilterable::BaseComponents::BaseComponent
   DEFAULT_BUTTON_TYPE = :default
   BUTTON_TYPE_MAPPINGS = {
     DEFAULT_BUTTON_TYPE => "shadow-sm border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-indigo-500",
@@ -66,6 +66,6 @@ def initialize(
   end
 
   def call
-    render(BaseComponent.new(**@arguments)) { content }
+    render(SnFilterable::BaseComponents::BaseComponent.new(**@arguments)) { content }
   end
 end

lib/sn_filterable/base_components/button_component.rb renamed to app/components/sn_filterable/base_components/button_component.rb

@@ -1,10 +1,12 @@
-module Filterable
+require_relative "filter_category_component"
+
+module SnFilterable
   # Renders a category to be displayed in the filtering sidebar/popup.
   # Simple view component, logic to display filters should render a [:filter] (see [Filterable::FilterCategoryComponent])
   class CategoryComponent < ViewComponent::Base
-    include HeroiconHelper
+    include Heroicon::Engine.helpers
 
-    renders_one :filter, Filterable::FilterCategoryComponent
+    renders_one :filter, SnFilterable::FilterCategoryComponent
 
     # @param [String] title Optional, the title of the category, will default to the filter's title (if specified)
     # @param [Boolean] open Optional, determines if the category should be opened by default

lib/sn_filterable/category_component.html.erb renamed to app/components/sn_filterable/category_component.html.erb

@@ -1,4 +1,4 @@
-module Filterable
+module SnFilterable
   # Handles rendering of the chips for the filters
   class ChipsComponent < ViewComponent::Base
     include FilteredHelper

lib/sn_filterable/category_component.rb renamed to app/components/sn_filterable/category_component.rb

@@ -0,0 +1 @@
+<%= render(SnFilterable::BaseComponents::ButtonComponent.new("@click": "filtersPopupOpen = !filtersPopupOpen", "class": "after:content-[attr(data-active)] before:block", "data-active": @count)) { t("shared.filterable.view_filter_button") } %>

lib/sn_filterable/chips_component.html.erb renamed to app/components/sn_filterable/chips_component.html.erb

@@ -1,4 +1,4 @@
-module Filterable
+module SnFilterable
   # Handles rendering of the `View filters` button for mobile layouts
   class FilterButtonComponent < ViewComponent::Base
     # @param [Filtered] filtered The filtered instance

lib/sn_filterable/chips_component.rb renamed to app/components/sn_filterable/chips_component.rb

@@ -1,7 +1,7 @@
-module Filterable
+module SnFilterable
   # Component for a filter's category for the filters sidebar
   class FilterCategoryComponent < ViewComponent::Base
-    include HeroiconHelper
+    include Heroicon::Engine.helpers
     include FilteredHelper
 
     # @param [Filtered] filtered The filtered instance