refactor: deprecar nanoid

estábamos usando nanoid + concatenación porque los id que genera podían
empezar con número o guión, lo que está prohibido en el atributo id.
además, la implementación de securerandom es mucho más veloz.

https://github.com/radeno/nanoid.rb/issues/67

Gemfile

@@ -85,7 +85,6 @@ gem 'rubanok'
 gem 'after_commit_everywhere', '~> 1.0'
 gem 'aasm'
 gem 'que-web'
-gem 'nanoid'
 
 # database
 gem 'hairtrigger'

Gemfile.lock

@@ -373,7 +373,6 @@ GEM
     multi_xml (0.6.0)
     mustermann (3.0.0)
       ruby2_keywords (~> 0.0.1)
-    nanoid (2.0.0)
     net-imap (0.4.9)
       date
       net-protocol
@@ -678,7 +677,6 @@ DEPENDENCIES
   memory_profiler
   mini_magick
   mobility
-  nanoid
   net-ssh
   nokogiri
   pg

app/helpers/application_helper.rb

@@ -3,6 +3,17 @@
 # Helpers
 module ApplicationHelper
   BRACKETS = /[\[\]]/.freeze
+  ALPHA_LARGE = [*'a'..'z', *'A'..'Z'].freeze
+
+  # Devuelve un indentificador aleatorio que puede usarse como atributo
+  # HTML. Reemplaza Nanoid. El primer caracter siempre es alfabético.
+  #
+  # @return [String]
+  def random_id
+    SecureRandom.urlsafe_base64.tap do |s|
+      s[0] = ALPHA_LARGE.sample
+    end
+  end
 
   # Devuelve el atributo name de un campo anidado en el formato que
   # esperan los helpers *_field

app/views/posts/attributes/_new_array.haml

@@ -3,7 +3,7 @@
 :ruby
   id = id_for(base, attribute)
   name = "#{base}[#{attribute}][]"
-  form_id = "form-#{Nanoid.generate}"
+  form_id = random_id
 
 %div{ data: { controller: 'modal array enter', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
@@ -41,7 +41,7 @@
         -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
         - metadata.values.sort_by(&:remove_diacritics).each do |value|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
-            = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: value, checked: metadata.value.include?(value), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: value, checked: metadata.value.include?(value), content: value
 
     - content_for :"#{id}_footer" do
       .input-group.w-auto.flex-grow-1.my-0

app/views/posts/attributes/_new_belongs_to.haml

@@ -8,15 +8,15 @@
   del formulario principal porque no se pueden anidar.
 
 :ruby
-  id = id_for(base, attribute)
+  id = random_id
   name = "#{base}[#{attribute}]"
-  form_id = "form-#{Nanoid.generate}"
-  modal_id = "modal-#{Nanoid.generate}"
-  post_id = "post-#{Nanoid.generate}"
-  post_form_id = "post-form-#{Nanoid.generate}"
-  post_modal_id = "post-modal-#{Nanoid.generate}"
-  post_form_loaded_id = "post-loaded-#{Nanoid.generate}"
-  value_list_id = "#{id}_body"
+  form_id = random_id
+  modal_id = random_id
+  post_id = random_id
+  post_form_id = random_id
+  post_modal_id = random_id
+  post_form_loaded_id = random_id
+  value_list_id = random_id
 
 %div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
@@ -55,7 +55,7 @@
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
-            = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: uuid, checked: metadata.value.include?(uuid), content: value, type: 'radio'
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value, type: 'radio'
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_has_and_belongs_to_many.haml

@@ -8,15 +8,15 @@
   del formulario principal porque no se pueden anidar.
 
 :ruby
-  id = id_for(base, attribute)
+  id = random_id
   name = "#{base}[#{attribute}][]"
-  form_id = "form-#{Nanoid.generate}"
-  modal_id = "modal-#{Nanoid.generate}"
-  post_id = "post-#{Nanoid.generate}"
-  post_form_id = "post-form-#{Nanoid.generate}"
-  post_modal_id = "post-modal-#{Nanoid.generate}"
-  post_form_loaded_id = "post-loaded-#{Nanoid.generate}"
-  value_list_id = "#{id}_body"
+  form_id = random_id
+  modal_id = random_id
+  post_id = random_id
+  post_form_id = random_id
+  post_modal_id = random_id
+  post_form_loaded_id = random_id
+  value_list_id = random_id
 
 %div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
@@ -55,7 +55,7 @@
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
-            = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: uuid, checked: metadata.value.include?(uuid), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_has_many.haml

@@ -10,13 +10,13 @@
 :ruby
   id = id_for(base, attribute)
   name = "#{base}[#{attribute}][]"
-  form_id = "form-#{Nanoid.generate}"
-  modal_id = "modal-#{Nanoid.generate}"
-  post_id = "post-#{Nanoid.generate}"
-  post_form_id = "post-form-#{Nanoid.generate}"
-  post_modal_id = "post-modal-#{Nanoid.generate}"
-  post_form_loaded_id = "post-loaded-#{Nanoid.generate}"
-  value_list_id = "#{id}_body"
+  form_id = random_id
+  modal_id = random_id
+  post_id = random_id
+  post_form_id = random_id
+  post_modal_id = random_id
+  post_form_loaded_id = random_id
+  value_list_id = random_id
 
 %div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
@@ -55,7 +55,7 @@
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, uuid|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: uuid } }
-            = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: uuid, checked: metadata.value.include?(uuid), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: uuid, checked: metadata.value.include?(uuid), content: value
 
     -#
       Según la definición del campo, si hay un filtro, tenemos que poder

app/views/posts/attributes/_new_predefined_array.haml

@@ -5,7 +5,7 @@
 :ruby
   id = id_for(base, attribute)
   name = "#{base}[#{attribute}][]"
-  form_id = "form-#{Nanoid.generate}"
+  form_id = random_id
 
 %div{ data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
@@ -44,7 +44,7 @@
         -# Eliminamos las tildes para poder buscar independientemente de cómo se escriba
         - metadata.values.each_pair do |value, key|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
-            = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: key, checked: metadata.value.include?(key), content: value
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: metadata.value.include?(key), content: value
 
     - content_for :"#{id}_footer" do
       -# Alinear los botones a la derecha

app/views/posts/attributes/_new_predefined_value.haml

@@ -10,13 +10,13 @@
 :ruby
   id = id_for(base, attribute)
   name = "#{base}[#{attribute}]"
-  form_id = "form-#{Nanoid.generate}"
-  modal_id = "modal-#{Nanoid.generate}"
-  post_id = "post-#{Nanoid.generate}"
-  post_form_id = "post-form-#{Nanoid.generate}"
-  post_modal_id = "post-modal-#{Nanoid.generate}"
-  post_form_loaded_id = "post-loaded-#{Nanoid.generate}"
-  value_list_id = "#{id}_body"
+  form_id = random_id
+  modal_id = random_id
+  post_id = random_id
+  post_form_id = random_id
+  post_modal_id = random_id
+  post_form_loaded_id = random_id
+  value_list_id = random_id
 
 %div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_array_value_path(site) } }
   %template{ data: { target: 'array.placeholder' } }
@@ -54,7 +54,7 @@
       .form-group.mb-0{ id: value_list_id }
         - metadata.values.each_pair do |value, key|
           .mb-2{ data: { target: 'array.item', 'searchable-value': value.remove_diacritics.downcase, value: value } }
-            = render 'bootstrap/custom_checkbox', name: name, id: "value-#{Nanoid.generate}", value: key, checked: (metadata.value == key), content: value, type: 'radio'
+            = render 'bootstrap/custom_checkbox', name: name, id: random_id, value: key, checked: (metadata.value == key), content: value, type: 'radio'
 
     - content_for :"#{id}_footer" do
       = render 'bootstrap/btn', content: t('.accept'), action: 'array#accept modal#hide', class: 'm-0 mr-1'

app/views/posts/new_array.haml

@@ -1,8 +1,8 @@
-- item_id = "item-#{Nanoid.generate}"
+- item_id = random_id
 
 .mb-2{ id: item_id, data: { target: 'array.item', 'searchable-value': @value.remove_diacritics.downcase, value: @value } }
   .d-flex.flex-row.flex-wrap
     .flex-grow-1
-      = render 'bootstrap/custom_checkbox', name: @name, id: "value-#{Nanoid.generate}", value: @value, checked: true, content: @value
+      = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @value, checked: true, content: @value
     %div
       %button.btn.btn-sm.m-0{ data: { action: 'array#remove', 'remove-target-param': item_id } }= t('.remove')

app/views/posts/new_belongs_to_value.haml

@@ -1,2 +1,2 @@
 .mb-2{ data: { target: 'array.item', 'searchable-value': @value.remove_diacritics.downcase, value: @uuid } }
-  = render 'bootstrap/custom_checkbox', name: @name, id: "value-#{Nanoid.generate}", value: @uuid, checked: true, content: @value, type: 'radio'
+  = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @uuid, checked: true, content: @value, type: 'radio'

app/views/posts/new_has_many_value.haml

@@ -1,2 +1,2 @@
 .mb-2{ data: { target: 'array.item', 'searchable-value': @value.remove_diacritics.downcase, value: @uuid } }
-  = render 'bootstrap/custom_checkbox', name: @name, id: "value-#{Nanoid.generate}", value: @uuid, checked: true, content: @value
+  = render 'bootstrap/custom_checkbox', name: @name, id: random_id, value: @uuid, checked: true, content: @value