Replace xdan-datetimepicker-rails gem on jquery-datetimepicker NPM package

Author: Skumring

.github/workflows/ci.yml

@@ -36,4 +36,5 @@ jobs:
         run: |
           gem install bundler -v '< 2'
           bundle install
+          yarn install
           bundle exec rspec spec

.gitignore

@@ -5,3 +5,11 @@ spec/rails/rails-*
 pkg
 .bundle
 vendor/bundl
+
+/public/packs
+/public/packs-test
+/public/assets
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

README.md

@@ -16,13 +16,21 @@ Add this line to your application's `Gemfile`:
 gem 'active_admin_datetimepicker'
 ```
 
+And to `package.json`:
+```javascript
+"dependencies": {
+  "jquery-datetimepicker": "^2.5.4"
+}
+```
+
 And then execute:
 
-    $ bundle
+    $ bundle && yarn
 
 Or install it yourself as:
 
     $ gem install active_admin_datetimepicker
+    $ yarn add jquery-datetimepicker
 
 Add the following line into `app/assets/stylesheets/active_admin.css.scss`:
 
@@ -36,10 +44,20 @@ Add the following line into `app/assets/javascripts/active_admin.js`:
 //= require active_admin_datetimepicker
 ```
 
+#### If you use Webpacker
+Will be enough to run `bundle && yarn`, but if you want to install `jquery-datetimepicker` with different version just run `yarn add jquery-datetimepicker@^2.5.4`
+#### If you use only Sprockets
+You should make sure about presence the `jquery-datetimepicker` into `node_modules` and `node_modules` correct load to you project `config/initializers/assets.rb`:
+```
+Rails.application.config.assets.paths << Rails.root.join('node_modules')
+```
+Helpful articles:
+- [Rails importing JavaScript packages from node_modules with assets pipeline(without webpacker](https://medium.com/@elicloudh/rails-importing-javascript-packages-from-node-modules-with-assets-pipeline-without-webpacker-98d985b22cea)
+- [Rails 5.1, the proof of the maturity of the ecosystem](https://g3ortega.com/rails/2017/05/30/rails-5-1-and-forward-yarn-on-rails.html)
 
 ## Usage
 
-This plugin adds the `date_time_picker` input and `date_time_range` filter, which use the [XDSoft DateTime Picker gem](https://github.com/shekibobo/xdan-datetimepicker-rails).
+This plugin adds the `date_time_picker` input and `date_time_range` filter, which use the [XDSoft DateTime Picker NPM package](https://github.com/xdan/datetimepicker).
 
 The `date_time_picker` input accepts many of the options available to the standard jQueryUI Datepicker. For example:
 

active_admin_datetimepicker.gemspec

@@ -20,5 +20,4 @@ Gem::Specification.new do |spec|
   spec.require_paths = ["lib"]
 
   spec.add_dependency "activeadmin", ">= 2.0", "< 3.a"
-  spec.add_dependency "xdan-datetimepicker-rails", "~> 2.5.4"
 end

app/assets/javascripts/active_admin_datetimepicker.js

@@ -1,4 +1,4 @@
-//= require jquery.xdan.datetimepicker.full
+//= require jquery-datetimepicker/build/jquery.datetimepicker.full.min.js
 
 function setupDateTimePicker(container) {
   const defaults = {

config/initializers/active_admin_datetimepicker.rb

@@ -1,5 +1,5 @@
 ActiveAdmin.setup do |config|
-  config.register_stylesheet 'jquery.xdan.datetimepicker.css'
+  config.register_stylesheet 'jquery-datetimepicker/build/jquery.datetimepicker.min.css'
 end
 
 Ransack.configure do |config|

lib/active_admin_datetimepicker.rb

@@ -1,5 +1,4 @@
 require 'activeadmin'
-require 'xdan-datetimepicker-rails'
 require 'active_admin_datetimepicker/version'
 require 'active_admin_datetimepicker/base'
 require 'active_admin_datetimepicker/inputs/date_time_picker_input'

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "jquery-datetimepicker": "^2.5.4"
+  }
+}

spec/support/rails_template.rb

@@ -21,6 +21,7 @@
 
 generate :'active_admin:install --skip-users'
 generate :'formtastic:install'
+run 'yarn add jquery-datetimepicker@^2.5.4'
 
 # Install active_admin_date_time_datetimepicker assets
 inject_into_file "app/assets/stylesheets/active_admin.scss",

yarn.lock

@@ -0,0 +1,27 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+jquery-datetimepicker@^2.5.4:
+  version "2.5.21"
+  resolved "https://registry.yarnpkg.com/jquery-datetimepicker/-/jquery-datetimepicker-2.5.21.tgz#00c388a78df2732fedfdb5c6529b6e84d53e0235"
+  integrity sha512-wDTpZ4f1PWd1XGaIIE0n6jLynlm+akBJ7/NjaB1bk2UJSS593CHJPZ3+FNEXoyvNVUeBlBC0oX6WTfCyfUhX/w==
+  dependencies:
+    jquery ">= 1.7.2"
+    jquery-mousewheel ">= 3.1.13"
+    php-date-formatter "^1.3.4"
+
+"jquery-mousewheel@>= 3.1.13":
+  version "3.1.13"
+  resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
+  integrity sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU=
+
+"jquery@>= 1.7.2":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
+php-date-formatter@^1.3.4:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/php-date-formatter/-/php-date-formatter-1.3.6.tgz#6d67359da890c742005fa89d20be3ded31cc1d2a"
+  integrity sha512-/CKsZYmAwXeNh8KpD/CF9hcJDZNhdb2ICN8+qgqOt5sUu9liZIxZ1R284TNj5MtPt8RjG5X0xn6WSqL0kcKMBg==