bullet_train-fields 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 7fdef51272f0cd0ac4d760b867f51ac4b6c8d8198c11321ea726b75954752ca6
+  data.tar.gz: bc88415a493dcde1ce185ccd54429716fe0b61c28d87b842e2c255ecf1be70ba
+SHA512:
+  metadata.gz: 69e1ff8c6386572480de92c77ed4ca2a1561285d4183bf27fd6eca297d006aff60b5579a6bcc2700fe7edda3b9a4470d1beb43bc3c41ce0e67d00aea9f933ab5
+  data.tar.gz: df518f2a4f2d6cae1fbc8bd0df7cf39076b7d8b16343285bb35c5569c8271c1c9d9e60b218faa39e465ffeb9a22402a87b7e15c71a9010216b78cd5c7e669f2b

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2022 Andrew Culver
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# BulletTrain::Fields
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "bullet_train-fields"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install bullet_train-fields
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/controllers/concerns/fields/boolean_support.rb

@@ -0,0 +1,10 @@
+module Fields::BooleanSupport
+  extend ActiveSupport::Concern
+
+  def assign_boolean(strong_params, attribute)
+    attribute = attribute.to_s
+    if strong_params.dig(attribute).present?
+      strong_params[attribute] = ActiveModel::Type::Boolean.new.cast(strong_params[attribute]) || false
+    end
+  end
+end

data/app/controllers/concerns/fields/controller_support.rb

@@ -0,0 +1,7 @@
+module Fields::ControllerSupport
+  include Fields::BooleanSupport
+  include Fields::DateAndTimeSupport
+  include Fields::DateSupport
+  include Fields::OptionsSupport
+  include Fields::SuperSelectSupport
+end

data/app/controllers/concerns/fields/date_and_time_support.rb

@@ -0,0 +1,13 @@
+module Fields::DateAndTimeSupport
+  extend ActiveSupport::Concern
+
+  def assign_date_and_time(strong_params, attribute)
+    attribute = attribute.to_s
+    time_zone_attribute = "#{attribute}_time_zone"
+    if strong_params.dig(attribute).present?
+      time_zone = ActiveSupport::TimeZone.new(strong_params[time_zone_attribute] || current_team.time_zone)
+      strong_params.delete(time_zone_attribute)
+      strong_params[attribute] = time_zone.strptime(strong_params[attribute], t("global.formats.date_and_time"))
+    end
+  end
+end

data/app/controllers/concerns/fields/date_support.rb

@@ -0,0 +1,12 @@
+module Fields::DateSupport
+  extend ActiveSupport::Concern
+
+  def assign_date(strong_params, attribute)
+    attribute = attribute.to_s
+    if strong_params.dig(attribute).present?
+      parsed_value = Chronic.parse(strong_params[attribute])
+      return nil unless parsed_value
+      strong_params[attribute] = parsed_value.to_date
+    end
+  end
+end

data/app/controllers/concerns/fields/options_support.rb

@@ -0,0 +1,11 @@
+module Fields::OptionsSupport
+  extend ActiveSupport::Concern
+
+  def assign_checkboxes(strong_params, attribute)
+    attribute = attribute.to_s
+    if strong_params.dig(attribute).present?
+      # filter out the placeholder inputs that arrive along with the form submission.
+      strong_params[attribute] = strong_params[attribute].select(&:present?)
+    end
+  end
+end

data/app/controllers/concerns/fields/super_select_support.rb

@@ -0,0 +1,29 @@
+module Fields::SuperSelectSupport
+  extend ActiveSupport::Concern
+
+  def assign_select_options(strong_params, attribute)
+    attribute = attribute.to_s
+    # We check for nil here because an empty array isn't `present?`, but we want to assign empty arrays.
+    if strong_params.key?(attribute) && !strong_params[attribute].nil?
+      # filter out the placeholder inputs that arrive along with the form submission.
+      strong_params[attribute] = strong_params[attribute].select(&:present?)
+    end
+  end
+
+  def create_model_if_new(id)
+    if id.present?
+      unless /^\d+$/.match?(id)
+        id = yield(id).id.to_s
+      end
+    end
+    id
+  end
+
+  def create_models_if_new(ids)
+    ids.map do |id|
+      create_model_if_new(id) do
+        yield(id)
+      end
+    end
+  end
+end

data/app/helpers/fields/cloudinary_image_helper.rb

@@ -0,0 +1,17 @@
+module Fields::CloudinaryImageHelper
+  def cloudinary_image_tag(cloudinary_id, image_tag_options = {}, cloudinary_image_options = {})
+    return nil unless cloudinary_id.present?
+
+    if image_tag_options[:width]
+      cloudinary_image_options[:width] ||= image_tag_options[:width] * 2
+    end
+
+    if image_tag_options[:height]
+      cloudinary_image_options[:height] ||= image_tag_options[:height] * 2
+    end
+
+    cloudinary_image_options[:crop] ||= :fill
+
+    image_tag cl_image_path(cloudinary_id, cloudinary_image_options), image_tag_options
+  end
+end

data/app/helpers/fields/html_editor_helper.rb

@@ -0,0 +1,19 @@
+module Fields::HtmlEditorHelper
+  TEMPORARY_REPLACEMENT = "https://temp.bullettrain.co/"
+  def html_sanitize(string)
+    return string unless string
+    string = sanitize(string, tags: %w[div br strong em b i del a h1 blockquote pre ul ol li], attributes: %w[href])
+    links_target_blank(string).html_safe
+  end
+
+  def links_target_blank(body)
+    doc = Nokogiri::HTML(body)
+    doc.css("a").each do |link|
+      link["target"] = "_blank"
+      # To avoid window.opener attack when target blank is used
+      # https://mathiasbynens.github.io/rel-noopener/
+      link["rel"] = "noopener"
+    end
+    doc.to_s
+  end
+end

data/app/helpers/fields/phone_field_helper.rb

@@ -0,0 +1,7 @@
+module Fields::PhoneFieldHelper
+  def display_phone_number(phone_number)
+    return nil unless phone_number.present?
+    phone_number_parsed = Phonelib.parse(phone_number)
+    phone_number_parsed.full_international.gsub(/^\+#{phone_number_parsed.country_code}/, "<span class=\"text-muted\">+#{phone_number_parsed.country_code}</span>").html_safe
+  end
+end

data/app/helpers/fields/trix_editor_helper.rb

@@ -0,0 +1,17 @@
+module Fields::TrixEditorHelper
+  TEMPORARY_REPLACEMENT = "https://temp.bullettrain.co/"
+  def trix_sanitize(string)
+    return string unless string
+    # TODO this is a hack to get around the fact that rails doesn't allow us to add any acceptable protocols.
+    string = string.gsub("bullettrain://", TEMPORARY_REPLACEMENT)
+    string = sanitize(string, tags: %w[div br strong em del a h1 blockquote pre ul ol li], attributes: %w[href])
+    # given the limited scope of what we're doing here, this string replace should work.
+    # it should also use a lot less memory than nokogiri.
+    string = string.gsub(/<a href="#{TEMPORARY_REPLACEMENT}(.*?)\/.*?">(.*?)<\/a>/o, "<span class=\"tribute-reference tribute-\\1-reference\">\\2</span>").html_safe
+    trix_content(string)
+  end
+
+  def trix_content(body)
+    links_target_blank(body).html_safe
+  end
+end

data/app/helpers/fields_helper.rb

@@ -0,0 +1,19 @@
+module FieldsHelper
+  def current_fields_form
+    @_fields_helper_forms ? @_fields_helper_forms.last : nil
+  end
+
+  def with_field_settings(options)
+    @_fields_helper_forms ||= []
+
+    if options[:form]
+      @_fields_helper_forms << options[:form]
+    end
+
+    yield
+
+    if options[:form]
+      @_fields_helper_forms.pop
+    end
+  end
+end

data/app/javascript/controllers/fields/button_toggle_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "shadowField" ]
+
+  clickShadowField(event) {
+    // we have to stop safari from doing what we originally expected.
+    event.preventDefault();
+
+    // then we need to manually click the hidden checkbox or radio button ourselves.
+    this.shadowFieldTarget.click()
+  }
+}

data/app/javascript/controllers/fields/cloudinary_image_controller.js

@@ -0,0 +1,100 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "uploadButton", "hiddenField", "thumbnail" ]
+  static values = { 
+    signaturesUrl: String,
+    height: Number,
+    width: Number,
+    cloudName: String,
+    apiKey: String,
+    googleApiKey: String,
+    urlFormat: String,
+    sources: String,
+    searchByRights: Boolean
+  }
+  static classes = [ "thumbnailShown" ]
+
+  pickImageAndUpload(event) {
+    // don't submit the form.
+    event.preventDefault()
+
+    // prepare the list of default sources a user can upload an image from.
+    var defaultSources = ['local', 'url', 'camera']
+    if (this.hasGoogleApiKeyValue) {
+      defaultSources.push('image_search')
+    }
+
+    // configure cloudinary's uploader's options.
+    // many of these are configurable at the point where the `shared/fields/cloudinary_image` partial is included.
+    var options = {
+      cloud_name: this.cloudNameValue,
+      apiKey: this.apiKeyValue,
+      upload_preset: this.uploadPresetValue,
+      upload_signature: this.getCloudinarySignature.bind(this),
+      multiple: false,
+      sources: this.hasSourcesValue ? this.sourcesValue.split(',') : defaultSources,
+      search_by_rights: this.hasSearchByRightsValue && this.searchByRightsValue === false ? false : true // default to true.
+    }
+    
+    if (this.hasGoogleApiKeyValue) {
+      options['google_api_key'] = this.googleApiKeyValue
+    }
+    
+    // open cloudinary's upload widget.
+    cloudinary.openUploadWidget(options, this.handleWidgetResponse.bind(this))
+  }
+  
+  clearImage(event) {
+    // don't submit the form.
+    event.preventDefault()
+
+    // clear the cloudinary id.
+    this.hiddenFieldTarget.value = null
+    
+    // remove any existing image from the button.
+    this.removeThumbnail()
+  }
+  
+  getCloudinarySignature(callback, paramsToSign) {
+    $.ajax({
+      url: this.signaturesUrlValue,
+      type: "GET",
+      dataType: "text",
+      data: {data: paramsToSign},
+      complete: function() { console.log("complete") },
+      success: function(signature, textStatus, xhr) { callback(signature) },
+      error: function(xhr, status, error) { console.log(xhr, status, error) }
+    })
+  }
+  
+  handleWidgetResponse(error, response) {
+    // after the user has successfully uploaded a single file ..
+    if (!error && response && response.event === "success") { 
+      const data = response.info
+      
+      // update the cloudinary id field in the form.
+      this.hiddenFieldTarget.value = data.public_id
+
+      // remove any existing image.
+      this.removeThumbnail()
+
+      // generate a new image preview url.
+      this.addThumbnail(this.urlFormatValue.replace('CLOUDINARY_ID', data.public_id))
+    }
+  }
+  
+  addThumbnail(url) {
+    var $imageElement = $(`<img src="${url}" width="${this.widthValue}" height="${this.heightValue}" data-${this.identifier}-target="thumbnail" />`)
+    $(this.uploadButtonTarget).prepend($imageElement)
+
+    // mark the image as present.
+    this.uploadButtonTarget.classList.add(this.thumbnailShownClass)
+  }
+  
+  removeThumbnail() {
+    if (!this.hasThumbnailTarget) { return }
+    this.uploadButtonTarget.removeChild(this.thumbnailTarget)
+    this.uploadButtonTarget.classList.remove(this.thumbnailShownClass)
+  }
+}

data/app/javascript/controllers/fields/color_picker_controller.js

@@ -0,0 +1,115 @@
+import { Controller } from "stimulus"
+import '@simonwep/pickr/dist/themes/monolith.min.css'
+
+import Pickr from '@simonwep/pickr';
+
+export default class extends Controller {
+  static targets = [ "colorPickerValue", "colorField", "colorInput", "userSelectedColor", "colorOptions" ];
+  static values = { initialColor: String }
+
+  connect() {
+    this.initPluginInstance()
+    this.colorOptions = $(this.colorOptionsTarget).find('button').map(function (_, button) { return $(button).attr('data-color'); }).get()
+  }
+
+  disconnect() {
+    this.teardownPluginInstance()
+  }
+
+  pickColor(event) {
+    event.preventDefault();
+
+    const targetEl = event.target;
+    const color = targetEl.dataset.color;
+
+    $(this.colorInputTarget).val(color);
+    $(this.colorPickerValueTarget).val(color);
+    $(this.userSelectedColorTarget).data('color', color);
+    $('.button-color').removeClass('ring-2 ring-offset-2');
+
+    this.pickr.setColor(color);
+
+    targetEl.classList.add('ring-2', 'ring-offset-2');
+  }
+
+  pickRandomColor(event) {
+    event.preventDefault();
+
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+
+    this.pickr.setColor(`rgb ${r} ${g} ${b}`);
+    const hexColor = this.pickr.getColor().toHEXA().toString();
+    this.pickr.setColor(hexColor);
+
+    this.showUserSelectedColor(hexColor);
+  }
+
+  showUserSelectedColor(color) {
+    $(this.colorInputTarget).val(color);
+    $(this.colorPickerValueTarget).val(color);
+
+    $('.button-color').removeClass('ring-2 ring-offset-2');
+
+    $(this.userSelectedColorTarget)
+      .addClass('ring-2')
+      .addClass('ring-offset-2')
+      .css('background-color', color)
+      .css('--tw-ring-color', color)
+      .attr('data-color', color)
+      .show();
+  }
+
+  unpickColor(event) {
+    event.preventDefault();
+    $(this.colorPickerValueTarget).val('');
+    $(this.colorInputTarget).val('');
+    $(this.userSelectedColorTarget).hide();
+    $('.button-color').removeClass('ring-2 ring-offset-2');
+  }
+
+  togglePickr(event) {
+    event.preventDefault();
+  }
+
+  initPluginInstance() {
+    this.pickr = Pickr.create({
+      el: '.btn-pickr',
+      theme: 'monolith',
+      useAsButton: true,
+      default: this.initialColorValue || '#1E90FF',
+      components: {
+        // Main components
+        preview: true,
+        hue: true,
+
+        // Input / output Options
+        interaction: {
+          input: true,
+          save: true,
+        },
+      }
+    });
+
+    this.pickr.on('save', (color, _instance) => {
+      const hexaColor = color.toHEXA().toString()
+      if (!this.colorOptions.includes(hexaColor)) {
+        this.showUserSelectedColor(hexaColor);
+      }
+      this.pickr.hide();
+    });
+
+    const that = this
+
+    $('input[type="text"].pcr-result').on('keydown', function (e) {
+      if (e.key === 'Enter') {
+        that.pickr.applyColor(false)
+      }
+    })
+  }
+
+  teardownPluginInstance() {
+    this.pickr.destroy()
+  }
+}

data/app/javascript/controllers/fields/date_controller.js

@@ -0,0 +1,147 @@
+import { Controller } from "stimulus"
+import I18n from "i18n-js/index.js.erb"
+require("daterangepicker/daterangepicker.css");
+
+// requires jQuery, moment, might want to consider a vanilla JS alternative
+import 'daterangepicker';
+
+export default class extends Controller {
+  static targets = [ "field", "clearButton", "currentTimeZoneWrapper", "timeZoneButtons", "timeZoneSelectWrapper", "timeZoneField" ]
+  static values = { includeTime: Boolean, defaultTimeZones: Array }
+
+  connect() {
+    this.initPluginInstance()
+  }
+
+  disconnect() {
+    this.teardownPluginInstance()
+  }
+
+  clearDate(event) {
+    // don't submit the form, unless it originated from the cancel/clear button
+    event.preventDefault()
+
+    $(this.fieldTarget).val('')
+  }
+
+  applyDateToField(event, picker) {
+    const format = this.includeTimeValue ? 'MM/DD/YYYY h:mm A' : 'MM/DD/YYYY'
+    $(this.fieldTarget).val(picker.startDate.format(format))
+  }
+
+  showTimeZoneButtons(event) {
+    // don't follow the anchor
+    event.preventDefault()
+
+    $(this.currentTimeZoneWrapperTarget).toggleClass('hidden')
+    $(this.timeZoneButtonsTarget).toggleClass('hidden')
+  }
+
+  showTimeZoneSelectWrapper(event) {
+    // don't follow the anchor
+    event.preventDefault()
+
+    $(this.timeZoneButtonsTarget).toggleClass('hidden')
+
+    if (this.hasTimeZoneSelectWrapperTarget) {
+      $(this.timeZoneSelectWrapperTarget).toggleClass('hidden')
+    }
+  }
+
+  resetTimeZoneUI(e) {
+    e && e.preventDefault()
+
+    $(this.currentTimeZoneWrapperTarget).removeClass('hidden')
+    $(this.timeZoneButtonsTarget).addClass('hidden')
+
+    if (this.hasTimeZoneSelectWrapperTarget) {
+      $(this.timeZoneSelectWrapperTarget).addClass('hidden')
+    }
+  }
+
+  setTimeZone(event) {
+    // don't follow the anchor
+    event.preventDefault()
+
+    const currentTimeZoneEl = this.currentTimeZoneWrapperTarget.querySelector('a')
+    const {value} = event.target.dataset
+
+    $(this.timeZoneFieldTarget).val(value)
+    $(currentTimeZoneEl).text(value)
+
+    $('.time-zone-button').removeClass('button').addClass('button-alternative')
+    $(event.target).removeClass('button-alternative').addClass('button')
+
+    this.resetTimeZoneUI()
+  }
+
+  initPluginInstance() {
+    $(this.fieldTarget).daterangepicker({
+      singleDatePicker: true,
+      timePicker: this.includeTimeValue,
+      timePickerIncrement: 5,
+      autoUpdateInput: false,
+      locale: {
+        cancelLabel: I18n.t('fields.date_field.cancel'),
+        applyLabel: I18n.t('fields.date_field.apply'),
+        format: this.includeTimeValue ? 'MM/DD/YYYY h:mm A' : 'MM/DD/YYYY'
+      }
+    })
+
+    $(this.fieldTarget).on('apply.daterangepicker', this.applyDateToField.bind(this))
+    $(this.fieldTarget).on('cancel.daterangepicker', this.clearDate.bind(this))
+
+    this.pluginMainEl = this.fieldTarget
+    this.plugin = $(this.pluginMainEl).data('daterangepicker') // weird
+
+    // Init time zone select
+    if (this.includeTimeValue && this.hasTimeZoneSelectWrapperTarget) {
+      this.timeZoneSelect = this.timeZoneSelectWrapperTarget.querySelector('select.select2')
+
+      $(this.timeZoneSelect).select2({
+        width: 'style'
+      })
+
+      const self = this
+
+      $(this.timeZoneSelect).on('change.select2', function(event) {
+        const currentTimeZoneEl = self.currentTimeZoneWrapperTarget.querySelector('a')
+        const {value} = event.target
+
+        $(self.timeZoneFieldTarget).val(value)
+        $(currentTimeZoneEl).text(value)
+
+        const selectedOptionTimeZoneButton = $('.selected-option-time-zone-button')
+
+        if (self.defaultTimeZonesValue.includes(value)) {
+          $('.time-zone-button').removeClass('button').addClass('button-alternative')
+          selectedOptionTimeZoneButton.addClass('hidden').attr('hidden', true)
+          $(`a[data-value="${value}"`).removeClass('button-alternative').addClass('button')
+        } else {
+          // deselect any selected button
+          $('.time-zone-button').removeClass('button').addClass('button-alternative')
+
+          selectedOptionTimeZoneButton.text(value)
+          selectedOptionTimeZoneButton.attr('data-value', value).removeAttr('hidden')
+          selectedOptionTimeZoneButton.removeClass(['hidden', 'button-alternative']).addClass('button')
+        }
+
+        self.resetTimeZoneUI()
+      })
+    }
+  }
+
+  teardownPluginInstance() {
+    if (this.plugin === undefined) { return }
+
+    $(this.pluginMainEl).off('apply.daterangepicker')
+    $(this.pluginMainEl).off('cancel.daterangepicker')
+
+    // revert to original markup, remove any event listeners
+    this.plugin.remove()
+
+    if (this.includeTimeValue) {
+      $(this.timeZoneSelect).select2('destroy');
+    }
+  }
+}

data/app/javascript/controllers/fields/file_field_controller.js

@@ -0,0 +1,87 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "fileField",
+    "removeFileFlag",
+    "downloadFileButton",
+    "removeFileButton",
+    "selectFileButton",
+    "progressBar",
+  ];
+
+  connect() {
+    // Add upload event listeners
+    const initializeListener = document.addEventListener(
+      "direct-upload:initialize",
+      (event) => {
+        this.selectFileButtonTarget.classList.add("hidden");
+        this.progressBarTarget.innerText = "0%";
+        this.progressBarTarget.style.width = "0%";
+        this.progressBarTarget.setAttribute("aria-valuenow", 0);
+        this.progressBarTarget.parentNode.classList.remove("hidden");
+      }
+    );
+
+    const progressListener = document.addEventListener(
+      "direct-upload:progress",
+      (event) => {
+        const { progress } = event.detail;
+        const width = `${progress.toFixed(1)}%`;
+
+        this.progressBarTarget.innerText = width;
+        this.progressBarTarget.setAttribute("aria-valuenow", progress);
+        this.progressBarTarget.style.width = width;
+      }
+    );
+
+    const errorListener = document.addEventListener(
+      "direct-upload:error",
+      (event) => {
+        event.preventDefault();
+
+        const { error } = event.detail;
+        this.progressBarTarget.innerText = error;
+      }
+    );
+
+    this.uploadListeners = {
+      "direct-upload:initialize": initializeListener,
+      "direct-upload:progress": progressListener,
+      "direct-upload:error": errorListener,
+    };
+  }
+
+  disconnect() {
+    // Teardown event listeners
+    for (const event in this.uploadListeners) {
+      document.removeEventListener(event, this.uploadListeners[event]);
+    }
+  }
+
+  uploadFile() {
+    this.fileFieldTarget.click();
+  }
+
+  removeFile() {
+    if (this.hasDownloadFileButtonTarget) {
+      this.downloadFileButtonTarget.classList.add("hidden");
+    }
+
+    this.removeFileButtonTarget.classList.add("hidden");
+    this.removeFileFlagTarget.value = true;
+  }
+
+  handleFileSelected() {
+    const statusText = this.selectFileButtonTarget.querySelector("span");
+    const icon = this.selectFileButtonTarget.querySelector("i");
+
+    if (this.hasDownloadFileButtonTarget) {
+      this.downloadFileButtonTarget.remove();
+    }
+
+    statusText.innerText = "Select Another File";
+    icon.classList.remove("ti-upload");
+    icon.classList.add("ti-check");
+  }
+}

data/app/javascript/controllers/fields/phone_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "stimulus"
+import 'intl-tel-input/build/css/intlTelInput.css';
+import intlTelInput from 'intl-tel-input';
+
+export default class extends Controller {
+  static targets = [ "field" ]
+
+  connect() {
+    this.initPluginInstance()
+  }
+
+  disconnect() {
+    this.teardownPluginInstance()
+  }
+
+  initPluginInstance() {
+    this.plugin = intlTelInput(this.fieldTarget, {
+      hiddenInput: this.fieldTarget.dataset.method,
+      // See `config/webpack/environment.js` for where we copy this into place.
+      // TODO Wish we could somehow incorporate webpacker's cache-breaking hash into this. Anyone know how?
+      utilsScript: "/assets/intl-tel-input/utils.js",
+      customContainer: "w-full"
+    });
+  }
+
+  teardownPluginInstance() {
+    if (this.plugin === undefined) { return }
+
+    // revert to original markup, remove any event listeners
+    this.plugin.destroy()
+  }
+}

data/app/javascript/controllers/fields/super_select_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "stimulus"
+require("select2/dist/css/select2.min.css");
+import $ from 'jquery';
+import 'select2';
+
+export default class extends Controller {
+  static targets = [ "select" ]
+  static values = {
+    acceptsNew: Boolean,
+    enableSearch: Boolean,
+    searchUrl: String,
+  }
+
+  connect() {
+    this.initPluginInstance()
+  }
+
+  disconnect() {
+    this.teardownPluginInstance()
+  }
+
+  cleanupBeforeInit() {
+    $(this.element).find('.select2-container--default').remove()
+  }
+
+  initPluginInstance() {
+    let options = {};
+
+    if (!this.enableSearchValue) {
+      options.minimumResultsForSearch = -1;
+    }
+
+    options.tags = this.acceptsNewValue
+
+    if (this.searchUrlValue) {
+      options.ajax = {
+        url: this.searchUrlValue,
+        dataType: 'json',
+        // We enable pagination by default here
+        data: function(params) {
+          var query = {
+            search: params.term,
+            page: params.page || 1
+          }
+          return query
+        }
+        // Any additional params go here...
+      }
+    }
+
+    options.templateResult = this.formatState;
+    options.templateSelection = this.formatState;
+    options.width = 'style';
+
+    this.cleanupBeforeInit() // in case improperly torn down
+    this.pluginMainEl = this.selectTarget // required because this.selectTarget is unavailable on disconnect()
+    $(this.pluginMainEl).select2(options);
+  }
+
+  teardownPluginInstance() {
+    if (this.pluginMainEl === undefined) { return }
+
+    // revert to original markup, remove any event listeners
+    $(this.pluginMainEl).select2('destroy');
+  }
+
+  // https://stackoverflow.com/questions/29290389/select2-add-image-icon-to-option-dynamically
+  formatState(opt) {
+    var imageUrl = $(opt.element).attr('data-image');
+    var imageHtml = "";
+    if (imageUrl) {
+      imageHtml = '<img src="' + imageUrl + '" /> ';
+    }
+    return $('<span>' + imageHtml + opt.text + '</span>');
+  }
+}

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/bullet_train/fields/engine.rb

@@ -0,0 +1,6 @@
+module BulletTrain
+  module Fields
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/bullet_train/fields/version.rb

@@ -0,0 +1,5 @@
+module BulletTrain
+  module Fields
+    VERSION = "1.0.0"
+  end
+end

data/lib/bullet_train/fields.rb

@@ -0,0 +1,8 @@
+require "bullet_train/fields/version"
+require "bullet_train/fields/engine"
+
+module BulletTrain
+  module Fields
+    # Your code goes here...
+  end
+end

data/lib/tasks/bullet_train/fields_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :bullet_train_fields do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,86 @@
+--- !ruby/object:Gem::Specification
+name: bullet_train-fields
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Andrew Culver
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2022-01-31 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.0
+description: Bullet Train Fields
+email:
+- andrew.culver@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/bullet_train_fields_manifest.js
+- app/controllers/concerns/fields/boolean_support.rb
+- app/controllers/concerns/fields/controller_support.rb
+- app/controllers/concerns/fields/date_and_time_support.rb
+- app/controllers/concerns/fields/date_support.rb
+- app/controllers/concerns/fields/options_support.rb
+- app/controllers/concerns/fields/super_select_support.rb
+- app/helpers/fields/cloudinary_image_helper.rb
+- app/helpers/fields/html_editor_helper.rb
+- app/helpers/fields/phone_field_helper.rb
+- app/helpers/fields/trix_editor_helper.rb
+- app/helpers/fields_helper.rb
+- app/javascript/controllers/fields/button_toggle_controller.js
+- app/javascript/controllers/fields/cloudinary_image_controller.js
+- app/javascript/controllers/fields/color_picker_controller.js
+- app/javascript/controllers/fields/date_controller.js
+- app/javascript/controllers/fields/file_field_controller.js
+- app/javascript/controllers/fields/phone_controller.js
+- app/javascript/controllers/fields/super_select_controller.js
+- config/routes.rb
+- lib/bullet_train/fields.rb
+- lib/bullet_train/fields/engine.rb
+- lib/bullet_train/fields/version.rb
+- lib/tasks/bullet_train/fields_tasks.rake
+homepage: https://github.com/bullet-train-co/bullet_train-fields
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/bullet-train-co/bullet_train-fields
+  source_code_uri: https://github.com/bullet-train-co/bullet_train-fields
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.22
+signing_key:
+specification_version: 4
+summary: Bullet Train Fields
+test_files: []