formatic 0.2.3 → 0.2.5

data/app/assets/stylesheets/formatic.sass

@@ -0,0 +1,17 @@
+// ITCSS
+
+@use "formatic/generics/flip.sass"
+
+@use "formatic/components/wrapper.sass" // Wrapper comes first, rest alphabetically
+@use "formatic/components/checklist.sass"
+@use "formatic/components/date.sass"
+@use "formatic/components/select.sass"
+@use "formatic/components/stepper.sass"
+@use "formatic/components/string.sass"
+@use "formatic/components/textarea.sass"
+@use "formatic/components/time.sass"
+@use "formatic/components/toggle.sass"
+
+@use "formatic/utilities/container"
+
+@use "formatic/scopes/form"

data/app/assets/stylesheets/vendor.sass

@@ -0,0 +1 @@
+@use "filepond"

data/app/components/formatic/base.rb

@@ -3,6 +3,9 @@
 module Formatic
   # All inputs inherit from this class.
   class Base < ApplicationComponent
+    # You can render something within the wrapper, after the input.
+    renders_one :footer
+
     # Rails form builder. Usually with a model as `f.object`.
     option :f
 
@@ -17,6 +20,9 @@ module Formatic
     # If not passed in, it is derived from the form object.
     option :value, as: :manual_value, default: -> { :_fetch_from_record }
 
+    # Custom Data-attributes for the <input>
+    option :data, as: :manual_data, default: -> { {} }
+
     # CSS class(es) applied to the <input> element
     # and the wrapper <div> respectively.
     option :class, as: :manual_class, optional: true
@@ -25,6 +31,9 @@ module Formatic
     # For inputs that support `<input autofocus=...>`
     option :autofocus, default: -> { false }
 
+    # Multiple records are submitted via one input.
+    option :multiple, default: -> { false }
+
     # Some inputs (such as checkboxes and textfields)
     # can be submitted continously by submitting their <form>
     # via javascript.
@@ -68,7 +77,7 @@ module Formatic
 
     # # Name of the URL param for this input.
     def input_name
-      "#{param_key}[#{attribute_name}]"
+      "#{param_key}[#{attribute_name}]#{'[]' if multiple}"
     end
   end
 end

data/app/components/formatic/checklist.rb

@@ -27,10 +27,10 @@ module Formatic
         <% wrap.with_input do %>
           <div class="c-formatic-checklist s-formatic">
 
-          <% f.collection_check_boxes(attribute_name, choices, :last, :first) do |builder| %>
+          <%= f.collection_check_boxes(attribute_name, choices, :last, :first) do |builder| %>
 
             <%= content_tag :div,
-                            builder.label { builder.check_box(class: manual_class) + content_tag(:i) + content_tag(:span, split_and_wrap(builder.object.first)) },
+                            builder.label { builder.check_box(class: manual_class, data:) + content_tag(:i) + content_tag(:span, split_and_wrap(builder.object.first)) },
                             class: 'c-formatic-toggle' %>
 
           <% end %>
@@ -52,6 +52,10 @@ module Formatic
       )
     end
 
+    def data
+      manual_data
+    end
+
     def split_and_wrap(string)
       parts = string.split('   ')
       return parts.first if parts.size == 1

data/app/components/formatic/date.rb

@@ -104,7 +104,7 @@ module Formatic
     end
 
     def collection_for_month
-      result = (1..12).map { [l(::Date.new(1, _1), format: '%B  %-m'), _1] }
+      result = (1..12).map { [l(::Date.new(1, it), format: '%B  %-m'), it] }
       result.prepend([nil, nil]) if wrapper.optional?
       result
     end

data/app/components/formatic/file.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Formatic
+  # File upload
+  class File < ::Formatic::Base
+    option :direct_upload, default: -> { true }
+    option :multiple, default: -> { false }
+    option :accept, default: -> {}
+
+    # TODO: Make the hidden_field (form validations) work with multiple: true
+    erb_template <<~ERB
+      <%= render wrapper do |wrap| %>
+
+        <% wrap.with_input do %>
+
+          <div class="c-formatic-file js-formatic-file">
+            <%- if value.present? && value.attached? -%>
+              <%= f.hidden_field attribute_name, value: value.signed_id %>
+            <%- end -%>
+
+            <%= f.file_field attribute_name, class: "js-formatic-file__input", direct_upload:, multiple:, accept: %>
+          </div>
+        <% end %>
+      <% end %>
+    ERB
+  end
+end

data/app/components/formatic/files.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Formatic
+  # File upload
+  class Files < ::Formatic::File
+    option :multiple, default: -> { true }
+  end
+end

data/app/components/formatic/select.rb

@@ -37,7 +37,7 @@ module Formatic
     end
 
     def current_choice_name
-      choices.detect { _1.last == value }&.first
+      choices.detect { it.last == value }&.first
     end
 
     def include_blank?

data/app/components/formatic/textarea.rb

@@ -3,8 +3,6 @@
 module Formatic
   # Text input for multi-line text.
   class Textarea < ::Formatic::Base
-    renders_one :footer
-
     erb_template <<~ERB
       <%= render wrapper do |wrap| -%>
 
@@ -21,6 +19,8 @@ module Formatic
             <%= f.text_area(attribute_name, **input_options) -%>
           <% end -%>
 
+          <%= footer -%>
+
           </div>
         <% end -%>
       <% end -%>
@@ -29,7 +29,7 @@ module Formatic
     def input_options
       result = {
         placeholder: wrapper.placeholder,
-        data: { '1p-ignore' => true },
+        data:,
         autofocus:,
         class: css_classes
       }
@@ -39,6 +39,10 @@ module Formatic
       result
     end
 
+    def data
+      { '1p-ignore' => true }.merge(manual_data)
+    end
+
     def css_classes
       classes = %i[c-formatic-textarea__input js-formatic-textarea]
       classes.push(:'is-autosubmit') if async_submit

data/app/components/formatic/time.rb

@@ -40,7 +40,7 @@ module Formatic
 
     # Usually the time component is used below the date component (for a DateTime attribute).
     # So, normally we don't want the label to be shown twice.
-    def label
+    def label # rubocop:disable Naming/PredicateMethod
       false
     end
 
@@ -76,7 +76,7 @@ module Formatic
     end
 
     def collection_for_hour
-      result = (0..23).map { [_1, _1] }
+      result = (0..23).map { [it, it] }
       result.prepend([nil, nil]) if wrapper.optional?
       result
     end
@@ -91,7 +91,7 @@ module Formatic
         steps.sort!
       end
 
-      result = steps.map { [_1.to_s.rjust(2, '0'), _1] }
+      result = steps.map { [it.to_s.rjust(2, '0'), it] }
       result.prepend([nil, nil]) if wrapper.optional?
       result
     end

data/config/importmap.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+pin 'formatic', to: 'formatic/setup.js'
+
+pin 'formatic/date', to: 'formatic/date.js'
+pin 'formatic/file', to: 'formatic/file.js'
+pin 'formatic/select', to: 'formatic/select.js'
+pin 'formatic/stepper', to: 'formatic/stepper.js'
+pin 'formatic/string', to: 'formatic/string.js'
+pin 'formatic/textarea', to: 'formatic/textarea.js'
+pin 'formatic/toggle', to: 'formatic/toggle.js'

data/lib/formatic/choices/options.rb

@@ -32,7 +32,7 @@ module Formatic
         return false unless model_klass.respond_to?(:reflect_on_all_associations)
 
         model_klass.reflect_on_all_associations(:belongs_to)
-                   .detect { _1.foreign_key == attribute_name.to_s }
+                   .detect { it.foreign_key == attribute_name.to_s }
       end
     end
   end

data/lib/formatic/choices/records.rb

@@ -40,7 +40,7 @@ module Formatic
         return false unless model_klass.respond_to?(:reflect_on_all_associations)
 
         model_klass.reflect_on_all_associations(:belongs_to)
-                   .detect { _1.foreign_key == attribute_name.to_s }
+                   .detect { it.foreign_key == attribute_name.to_s }
       end
     end
   end

data/lib/formatic/engine.rb

@@ -7,6 +7,30 @@ module Formatic
   # :nodoc:
   class Engine < ::Rails::Engine
     isolate_namespace Formatic
+    config.autoload_paths << root.join('lib')
+
+    initializer 'formatic.importmap', before: 'importmap' do |app|
+      app.config.importmap.paths << Engine.root.join('config/importmap.rb')
+      # Watch JS changes in development
+      app.config.importmap.cache_sweepers << Engine.root.join('app/assets/javascript')
+    end
+
+    initializer 'formatic.assets' do |app|
+      app.config.assets.paths << Engine.root.join('app/javascript')
+      app.config.assets.paths << Engine.root.join('app/stylesheets')
+    end
+
+    initializer 'formatic.vscode_snippets', group: :all do |app|
+      app.config.after_initialize do
+        vscode_dir = Rails.root.join('.vscode')
+        next unless vscode_dir.directory?
+
+        target = vscode_dir.join('formatic.code-snippets')
+        source = Engine.root.join('vscode/formatic.code-snippets')
+
+        FileUtils.ln_s(source, target, force: true)
+      end
+    end
 
     config.to_prepare do
       # Our Formatic components are subclasses of `ViewComponent::Base`.

data/lib/formatic/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Formatic
-  VERSION = '0.2.3'
+  VERSION = '0.2.5'
 end

data/lib/formatic/wrappers/required.rb

@@ -17,7 +17,7 @@ module Formatic
         return false if manual_required == false
         return false if validators.empty?
 
-        validators.any? { applicable?(_1) }
+        validators.any? { applicable?(it) }
       end
 
       private

data/lib/formatic.rb

@@ -3,6 +3,7 @@
 require 'calls'
 require 'countries'
 require 'holidays'
+require 'importmap-rails'
 require 'dry/initializer'
 
 require 'formatic/version'
@@ -20,7 +21,7 @@ require 'formatic/wrappers/required'
 require 'formatic/wrappers/translate'
 require 'formatic/wrappers/validators'
 
-require 'formatic/engine' if defined?(Rails::Engine)
+require 'formatic/engine'
 
 module Formatic
   class Error < ::StandardError; end

data/vscode/formatic.code-snippets

@@ -0,0 +1,58 @@
+{
+  "render Formatic::Checklist": {
+    "prefix": [
+      "fchecklist"
+    ],
+    "body": [
+      "= render Formatic::Checklist.new(f:, attribute_name: $0)",
+    ]
+  },
+  "render Formatic::String": {
+    "prefix": [
+      "fstring"
+    ],
+    "body": [
+      "= render Formatic::String.new(f:, attribute_name: $0)",
+    ]
+  },
+  "render Formatic::Stepper": {
+    "prefix": [
+      "fstepper"
+    ],
+    "body": [
+      "= render Formatic::Stepper.new(f:, attribute_name: $0)",
+    ]
+  },
+  "render Formatic::Textarea": {
+    "prefix": [
+      "ftextarea"
+    ],
+    "body": [
+      "= render Formatic::Textarea.new(f:, attribute_name: $0)",
+    ]
+  },
+  "render Formatic::Toggle": {
+    "prefix": [
+      "ftoggle"
+    ],
+    "body": [
+      "= render Formatic::Toggle.new(f:, attribute_name: $0)",
+    ]
+  },
+  "render Formatic::Select": {
+    "prefix": [
+      "fselect"
+    ],
+    "body": [
+      "= render Formatic::Select.new(f:, attribute_name: $0, records:)",
+    ]
+  },
+  "render Formatic::Date": {
+    "prefix": [
+      "fdate"
+    ],
+    "body": [
+      "= render Formatic::Date.new(f:, attribute_name: $0)",
+    ]
+  }
+}

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: formatic
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.5
 platform: ruby
 authors:
 - halo
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-19 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -80,6 +79,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: importmap-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -104,14 +117,37 @@ files:
 - CHANGELOG.md
 - LICENSE.txt
 - README.md
-- app/assets/javascript/formatic.js
-- app/assets/javascript/formatic.js.map
-- app/assets/javascript/formatic/components/date.ts
-- app/assets/javascript/formatic/components/select.ts
-- app/assets/javascript/formatic/components/stepper.ts
-- app/assets/javascript/formatic/components/string.ts
-- app/assets/javascript/formatic/components/textarea.ts
-- app/assets/javascript/formatic/components/toggle.ts
+- app/assets/javascript/declarations/date.d.ts
+- app/assets/javascript/declarations/file.d.ts
+- app/assets/javascript/declarations/select.d.ts
+- app/assets/javascript/declarations/setup.d.ts
+- app/assets/javascript/declarations/stepper.d.ts
+- app/assets/javascript/declarations/string.d.ts
+- app/assets/javascript/declarations/textarea.d.ts
+- app/assets/javascript/declarations/toggle.d.ts
+- app/assets/javascript/formatic/date.js
+- app/assets/javascript/formatic/date.js.map
+- app/assets/javascript/formatic/file.js
+- app/assets/javascript/formatic/file.js.map
+- app/assets/javascript/formatic/select.js
+- app/assets/javascript/formatic/select.js.map
+- app/assets/javascript/formatic/setup.js
+- app/assets/javascript/formatic/stepper.js
+- app/assets/javascript/formatic/stepper.js.map
+- app/assets/javascript/formatic/string.js
+- app/assets/javascript/formatic/string.js.map
+- app/assets/javascript/formatic/textarea.js
+- app/assets/javascript/formatic/textarea.js.map
+- app/assets/javascript/formatic/toggle.js
+- app/assets/javascript/formatic/toggle.js.map
+- app/assets/javascript/src/date.ts
+- app/assets/javascript/src/file.ts
+- app/assets/javascript/src/select.ts
+- app/assets/javascript/src/stepper.ts
+- app/assets/javascript/src/string.ts
+- app/assets/javascript/src/textarea.ts
+- app/assets/javascript/src/toggle.ts
+- app/assets/stylesheets/formatic.sass
 - app/assets/stylesheets/formatic/components/checklist.sass
 - app/assets/stylesheets/formatic/components/date.sass
 - app/assets/stylesheets/formatic/components/select.sass
@@ -121,9 +157,8 @@ files:
 - app/assets/stylesheets/formatic/components/time.sass
 - app/assets/stylesheets/formatic/components/toggle.sass
 - app/assets/stylesheets/formatic/components/wrapper.sass
+- app/assets/stylesheets/formatic/formatic.css
 - app/assets/stylesheets/formatic/generics/flip.sass
-- app/assets/stylesheets/formatic/index.sass
-- app/assets/stylesheets/formatic/package.json
 - app/assets/stylesheets/formatic/scopes/form.sass
 - app/assets/stylesheets/formatic/settings/_colors.sass
 - app/assets/stylesheets/formatic/tools/_cloud.sass
@@ -131,10 +166,14 @@ files:
 - app/assets/stylesheets/formatic/tools/_terminal.sass
 - app/assets/stylesheets/formatic/tools/_theme.sass
 - app/assets/stylesheets/formatic/utilities/container.sass
+- app/assets/stylesheets/formatic/vendor.css
+- app/assets/stylesheets/vendor.sass
 - app/components/formatic/application_component.rb
 - app/components/formatic/base.rb
 - app/components/formatic/checklist.rb
 - app/components/formatic/date.rb
+- app/components/formatic/file.rb
+- app/components/formatic/files.rb
 - app/components/formatic/select.rb
 - app/components/formatic/stepper.rb
 - app/components/formatic/string.rb
@@ -142,6 +181,7 @@ files:
 - app/components/formatic/time.rb
 - app/components/formatic/toggle.rb
 - app/components/formatic/wrapper.rb
+- config/importmap.rb
 - config/locales/formatic.de.yml
 - config/locales/formatic.en.yml
 - lib/formatic.rb
@@ -162,6 +202,7 @@ files:
 - lib/formatic/wrappers/required.rb
 - lib/formatic/wrappers/translate.rb
 - lib/formatic/wrappers/validators.rb
+- vscode/formatic.code-snippets
 homepage: https://github.com/halo/formatic
 licenses:
 - MIT
@@ -170,7 +211,6 @@ metadata:
   source_code_uri: https://github.com/halo/formatic
   changelog_uri: https://github.com/halo/halo/blob/main/CHANGELOG.md
   rubygems_mfa_required: 'true'
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -178,15 +218,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.2.0
+      version: 3.4.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.14
-signing_key:
+rubygems_version: 4.0.1
 specification_version: 4
 summary: A set of ViewComponents for form elements
 test_files: []

data/app/assets/javascript/formatic/components/date.ts

@@ -1,54 +0,0 @@
-namespace Formatic {
-  export class Date {
-    private el: HTMLElement
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.shortcutButtons.forEach((el) => {
-        el.addEventListener('click', (event) => {
-          event.preventDefault()
-          const shortcut = <HTMLInputElement>event.currentTarget
-
-          this.dayInput.value = shortcut.dataset.day
-          this.monthInput.value = shortcut.dataset.month
-          this.yearInput.value = shortcut.dataset.year
-        })
-      })
-    }
-
-    // ------------
-    // DOM Elements
-    // ------------
-
-    private get dayInput() {
-      return this.el.querySelector<HTMLSelectElement>('.js-formatic-date__day')
-    }
-
-    private get monthInput() {
-      return this.el.querySelector<HTMLSelectElement>('.js-formatic-date__month')
-    }
-
-    private get yearInput() {
-      return this.el.querySelector<HTMLSelectElement>('.js-formatic-date__year')
-    }
-
-    private get shortcutButtons() {
-      return this.el.querySelectorAll<HTMLElement>('.js-formatic-date__shortcut')
-    }
-  }
-}
-
-// --------------
-// Initialization
-// --------------
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll<HTMLElement>('.js-formatic-date').forEach((el) => {
-    console.debug('Instantiating Formatic.Date...')
-    new Formatic.Date(el)
-  })
-})

data/app/assets/javascript/formatic/components/select.ts

@@ -1,113 +0,0 @@
-namespace Formatic {
-  export class Select {
-    private el: HTMLElement
-    private timeoutId: ReturnType<typeof setTimeout>
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.autosize()
-
-      this.el.addEventListener('input', (event) => {
-        event.preventDefault()
-        if (this.autoSubmit) this.actionSave()
-      })
-    }
-
-    // ACTIONS
-
-    private actionSave() {
-      this.guiWaitingForSave()
-      this.debounce(this.actionSaveNow.bind(this))()
-    }
-
-    private actionSaveNow() {
-      console.debug("Saving select...")
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.save()
-    }
-
-    // GUI
-
-    private guiWaitingForSave() {
-      this.el.classList.add('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiSaved() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiFailed() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.add('is-failed')
-    }
-
-    // Attributes
-
-    private get autoSubmit() {
-      return this.el.classList.contains('is-autosubmit')
-    }
-
-    // Helpers
-
-    private save() {
-      const form = this.el.closest<HTMLFormElement>('form')
-      const data = new FormData(form)
-      data.set('_method', 'patch')
-
-      fetch(form.action, {
-        method: 'POST',
-        headers: { 'Accept': 'text/javascript' },
-        body: data
-      })
-        .then(response => {
-          if (response.status == 201) {
-            console.debug('Select content saved')
-            this.guiSaved()
-          } else {
-            console.debug('Select content not saved')
-            this.guiFailed()
-          }
-        }).catch(err => {
-          console.warn(err)
-          console.debug('Failed badly to save')
-        })
-    }
-
-    private debounce(fn: Function) {
-      return () => {
-        clearTimeout(this.timeoutId)
-        this.timeoutId = setTimeout(() => fn(), 1000)
-      }
-    }
-
-    private autosize() {
-      try {
-        autosize(this.el) // External library.
-      } catch (error) {
-        console.warn(`Formatic is missing the autosize library`)
-      }
-    }
-  }
-}
-
-// --------------
-// Initialization
-// --------------
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll<HTMLElement>('.js-formatic-select').forEach((el) => {
-    console.debug('Instantiating Formatic.Select...')
-    new Formatic.Select(el)
-  })
-})
-