bulma-rails-helpers 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 778c3dafae213061ae5a31634952cb0c0afddec441ac6c47eb37584ae3ba782a
+  data.tar.gz: 2774b17df0e7ae39652bb62f5a715d029d0bd4782ee9a1f1e6b132ceb34ccc1b
+SHA512:
+  metadata.gz: af60202790e1e7c9daf8e0819419c1972fbc227a7ad2166a4619bb2e5bbbc517b511f78308050c50008fd7cff0085f964839693cf9e94bb4768437e7a9d77f1d
+  data.tar.gz: 36c86bbbf37c810e9022252e8823493298ab4737eaa550e11334a9c25b915f052b0b04633f91d74d8f88645a7f1f6260405ebe6d04632b429e795cee2b584984

data/app/helpers/bulma/form_helper.rb

@@ -0,0 +1,254 @@
+module Bulma
+  # # Bulma Form Helper
+  #
+  # Module Bulma FormHelper overrides the Rails form helpers to generate elements that are decorated with Bulma CSS
+  # classes. Here is an example of the generated html from the `text_field` helper (with a User model):
+  #
+  #   f.text_field :name, class: "input"
+  #
+  #   <div class="field">
+  #     <label for="name" class="label">Name</label>
+  #     <div class="control">
+  #       <input id="user_name" class="input" type="text">
+  #     </div>
+  #   </div>
+  #
+  # In addition to the standard options, the following options are supported for inputs:
+  # - suppress_label: Do not render the label tag
+  # - icon_left: Add an icon to the left of the input field
+  # - icon_right: Add an icon to the right of the input field
+  #
+  # The two icon options should be a string that represents the icon class. For example, "fas fa-user" would render a user
+  # icon from Font Awesome.
+  module FormHelper
+    def text_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def password_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def telephone_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def date_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def time_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def datetime_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def month_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def week_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def url_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def email_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def number_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def range_field(object_name, method, options = {})
+      options = options.dup
+      wrap_input_field(object_name, method, options) { super object_name, method, options }
+    end
+
+    def submit_tag(value = "Save", options = {})
+      return super if options.delete(:delivered)
+
+      append_classes_to_options(options, "button")
+      wrap_with_control { super }
+    end
+
+    def checkbox(object_name, method, options = {}, checked_value = "1", unchecked_value = "0")
+      tag.div(class: "field") do
+        tag.div(class: "control") do
+          label(object_name, method, class: "checkbox") do
+            concat super
+            concat " #{t(method, scope: [ :helpers, :label, object_name ])}"
+          end
+        end
+      end
+    end
+
+    def checkbox_display(object_name, method, checked)
+      icon = checked ? "far fa-lg fa-square-check" : "fa-regular fa-square"
+
+      tag.div(class: "field") do
+        tag.div(class: "control") do
+          concat icon_span(icon, "is-medium")
+          concat tag.span t(method, scope: [ :helpers, :label, object_name ])
+        end
+      end
+    end
+
+    def select(object, method, choices = nil, options = {}, html_options = {}, &block)
+      wrap_with_field_and_label(object, method, options, suppress_label: options.delete(:suppress_label)) do
+        wrap_with_control do
+          tag.div(class: class_names(:select, is_danger: attribute_has_errors?(options, method))) { super }
+        end
+      end
+    end
+
+    def collection_select(object, method, collection, value_method, text_method, options = {}, html_options = {})
+      wrap_with_field_and_label(object, method, options, suppress_label: options.delete(:suppress_label), column: options.delete(:column)) do
+        wrap_with_control do
+          tag.div(class: class_names(:select, is_danger: attribute_has_errors?(options, method))) { super }
+        end
+      end
+    end
+
+    def file_field(object_name, method, options = {})
+      append_classes_to_options(options, "file-input")
+      append_data_attributes_to_options(options, bulma__file_input_display_target: "fileInput", action: "bulma--file-input-display#show")
+      accepted_file_types = options.fetch(:accept, "").split(",").map(&:strip)
+
+      # [File Upload](https://bulma.io/documentation/form/file/)
+      tag.div(class: "file is-boxed", data: { controller: "bulma--file-input-display", bulma__file_input_display_accepted_file_types_value: accepted_file_types }) do
+        tag.label(class: "file-label") do
+          concat super
+          concat(tag.span(class: "file-cta") do
+            concat tag.span(class: "file-icon") { tag.i(class: "fas fa-upload") }
+            concat tag.span(class: "file-label") { t(method, scope: [ "helpers", "label", object_name ]) }
+          end)
+          concat tag.div(class: "content", data: { bulma__file_input_display_target: "fileList" }) { "No file(s) selected" }
+        end
+      end
+    end
+
+    def textarea(object_name, method, options = {})
+      append_classes_to_options(options, "textarea")
+
+      wrap_with_field_and_label(object_name, method, options, suppress_label: options.delete(:suppress_label), column: options.delete(:column)) do
+        wrap_with_control { super }
+      end
+    end
+
+    def text_area(object_name, method, options = {})
+      textarea(object_name, method, options)
+    end
+
+    private
+
+    # [Form Control](https://bulma.io/documentation/form/general/#form-control)
+    def wrap_with_control
+      tag.div(class: "control") { yield }
+    end
+
+    # [Form Input](https://bulma.io/documentation/form/general/#complete-form-example)
+    def wrap_input_field(object_name, method, options)
+      options.extend(InputOptionsParser)
+      append_classes_to_options(options, "input")
+      append_classes_to_options(options, "is-danger") if attribute_has_errors?(options, method)
+
+      wrap_with_field_and_label(object_name, method, options, suppress_label: options.suppress_label?, column: options.column?) do
+        tag.div(class: class_names(:control, options.icon_control_classes)) do
+          concat yield
+          concat icon_span(options.icon_left, "is-small is-left") if options.icon_left?
+          concat icon_span(options.icon_right, "is-small is-right") if options.icon_right?
+        end
+      end
+    end
+
+    # [Form Field](https://bulma.io/documentation/form/general/#form-field)
+    # In addition to being able to add the "column" class by setting `column: true`, you can provide sizing for the
+    # column by passing in the class name as a string. For example, `column: "is-one-third"` will add the class
+    # "column is-one-third" to the field div.
+    def wrap_with_field_and_label(object_name, method, options, suppress_label: false, column: false)
+      tag.div(class: class_names(:field, column: column, column => column.is_a?(String))) do
+        concat label(object_name, method, class: "label") unless suppress_label
+        concat yield
+      end
+    end
+
+    # [Icon](https://bulma.io/documentation/elements/icon/)
+    def icon_span(icon, additional_classes = nil)
+      tag.span(class: "icon #{additional_classes}".strip) do
+        tag.i(class: icon)
+      end
+    end
+
+    def append_classes_to_options(options, *additional_classes)
+      classes = options.fetch(:class, "")
+      adds = additional_classes.reject { classes.include?(it) }
+      options[:class] = "#{classes} #{adds.join(' ')}".strip
+    end
+
+    def append_data_attributes_to_options(options, **additional_attributes)
+      data = options.fetch(:data, {})
+      options[:data] = data.merge(additional_attributes)
+    end
+
+    def attribute_has_errors?(options, attribute_name)
+      object = options[:object]
+      object.respond_to?(:errors) && object.errors.key?(attribute_name)
+    end
+
+    # # Input Options Parser
+    #
+    # Module InputOptionsParser is mixed into the options hash to provide accessors and predicate methods for the custom
+    # options suppress_label, icon_left, and icon_right.
+    #
+    # Method `icon_control_classes` returns a hash suitable for passing to the `class_names` helper method.
+    #
+    # TODO: Handle options for [input modifiers color, size, and state](https://bulma.io/documentation/form/input/).
+    module InputOptionsParser
+      def self.extended(base)
+        attr_reader :icon_left, :icon_right
+
+        base.instance_variable_set(:@suppress_label, base.delete(:suppress_label))
+        base.instance_variable_set(:@icon_left, base.delete(:icon_left))
+        base.instance_variable_set(:@icon_right, base.delete(:icon_right))
+        base.instance_variable_set(:@column, base.delete(:column))
+      end
+
+      def suppress_label?
+        @suppress_label
+      end
+
+      def icon_left?
+        @icon_left.present?
+      end
+
+      def icon_right?
+        @icon_right.present?
+      end
+
+      def icon_control_classes
+        { "has-icons-left": icon_left?, "has-icons-right": icon_right? }
+      end
+
+      def column?
+        @column
+      end
+    end
+  end
+end

data/app/javascript/controllers/bulma/file_input_display_controller.js

@@ -0,0 +1,82 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fileInput", "fileList"]
+
+  acceptValues = []
+
+  connect() {
+    this.show()
+    this.#parseAcceptAttribute()
+  }
+
+  show() {
+    const preview = this.fileListTarget;
+    this.#clear(preview)
+
+    const curFiles = this.fileInputTarget.files;
+    if (curFiles.length === 0) {
+      const para = document.createElement("p")
+      para.textContent = "No files currently selected for upload"
+      preview.appendChild(para)
+    } else {
+      const list = document.createElement("ul")
+      preview.appendChild(list)
+  
+      for (const file of curFiles) {
+        const listItem = document.createElement("li")
+        listItem.textContent =  this.#fileTextContent(file)
+        list.appendChild(listItem);
+      }
+    }
+  }
+
+  #clear(preview) {
+    while (preview.firstChild) {
+      preview.removeChild(preview.firstChild);
+    }
+  }
+
+  #fileTextContent(file) {
+    if (this.#validFileType(file)) {
+      return this.#fileInfo(file);
+    } else {
+      return `File name ${file.name}: Not a valid file type. Update your selection.`;
+    }
+  }
+
+  #validFileType(file) {
+    // If no accept attribute is specified, accept all files
+    if (this.acceptValues.length === 0) {
+      return true
+    }
+
+    const fileExtension = `.${file.name.split('.').pop().toLowerCase()}`
+    const fileMimeType = file.type.toLowerCase()
+
+    // Check if the file matches any of the accept criteria
+    return this.acceptValues.some(acceptValue => {
+      if (acceptValue.startsWith('.')) {
+        // Check file extension (e.g. ".jpg")
+        return acceptValue.toLowerCase() === fileExtension
+      } else if (acceptValue.includes('/*')) {
+        // Check MIME type with wildcard (e.g. "image/*")
+        const acceptGroup = acceptValue.split('/')[0]
+        return fileMimeType.startsWith(`${acceptGroup}/`)
+      } else {
+        // Check specific MIME type (e.g. "image/jpeg")
+        return acceptValue === fileMimeType
+      }
+    })
+  }
+
+  #fileInfo(file) {
+    return `${file.name} (${file.size} bytes)`
+  }
+
+  #parseAcceptAttribute() {
+    if (this.fileInputTarget.accept) {
+      this.acceptValues = this.fileInputTarget.accept.split(',').map(type => type.trim())
+    }
+  }
+}

data/app/javascript/controllers/bulma/navigation_bar_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "burger", "menu" ]
+
+  toggle(_event) {
+    this.burgerTarget.classList.toggle('is-active');
+    this.menuTarget.classList.toggle('is-active');
+  }
+}

data/config/importmap.rb

@@ -0,0 +1 @@
+pin_all_from File.expand_path("../app/javascript/controllers/bulma", __dir__), under: "controllers/bulma"

data/lib/bulma/engine.rb

@@ -0,0 +1,13 @@
+require "rails/engine"
+
+module Bulma
+  class Engine < ::Rails::Engine
+    initializer "bulma.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+    end
+
+    initializer "bulma.assets" do |app|
+      app.config.assets.paths << root.join("app/javascript")
+    end
+  end
+end

data/lib/bulma/version.rb

@@ -0,0 +1,3 @@
+module Bulma
+  VERSION = "0.1.0"
+end

data/lib/bulma-rails-helpers.rb

@@ -0,0 +1,4 @@
+require "bulma/engine"
+
+module Bulma
+end

metadata

@@ -0,0 +1,78 @@
+--- !ruby/object:Gem::Specification
+name: bulma-rails-helpers
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Todd Kummer
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.0.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.0.2
+- !ruby/object:Gem::Dependency
+  name: minitest-difftastic
+  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: Override the Rails tag helpers to generate HTML that plays well with
+  the Bulma CSS framework.
+email:
+- todd@rockridgesolutions.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- app/helpers/bulma/form_helper.rb
+- app/javascript/controllers/bulma/file_input_display_controller.js
+- app/javascript/controllers/bulma/navigation_bar_controller.js
+- config/importmap.rb
+- lib/bulma-rails-helpers.rb
+- lib/bulma/engine.rb
+- lib/bulma/version.rb
+homepage: https://github.com/RockSolt/bulma-rails-helpers
+licenses:
+- MIT
+metadata:
+  rubygems_mfa_required: 'true'
+  homepage_uri: https://github.com/RockSolt/bulma-rails-helpers
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.4.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.7
+specification_version: 4
+summary: Build Rails forms with Bulma CSS framework.
+test_files: []