formatic 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 141f3404812472271ac7282970a7b86b5c25075760629d5c40ecacc959b39d59
+  data.tar.gz: 8eb7224e10e771fb2970a26e199fcf34d3da05b65ca957ee40d35990c367b625
+SHA512:
+  metadata.gz: 217d2ff02fe3b2c0ec7c8ff9c8c5169e0c0896ac34912688ac4c512f8c9a2a53ad771ca92ae20b5362651ac36ecdf96ef6960863b0618c627972b04a05a97aca
+  data.tar.gz: c044f04c04f9b0dc206f4c4066849dad6ea13d0f1feba6f463e91c35198e471b3a7d91f45b21b9b96ba22ff2c4814371b128e8474377415431fc85bc715091a7

data/CHANGELOG.md

@@ -0,0 +1,5 @@
+## [Unreleased]
+
+## [0.1.0] - 2023-08-24
+
+- Initial release

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) halo
+
+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,32 @@
+# Formatic
+
+Opinionated ViewComponents for building forms.
+
+## Usage
+
+```ruby
+# In Rails view
+= render Formatic::String.new(f:, attribute_name: :first_name)
+```
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+    $ bundle add formatic
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+    $ gem install formatic
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/ci` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/halo/formatic.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,109 @@
+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', 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)
+  })
+})
+

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

@@ -0,0 +1,89 @@
+namespace Formatic {
+  export class Stepper {
+    private el: HTMLElement
+
+    constructor(el: HTMLElement) {
+      this.el = el
+      this.setupBindings()
+    }
+
+    private setupBindings() {
+      this.incrementButtons.forEach((el) => {
+        el.addEventListener('click', (event) => {
+          event.preventDefault()
+          this.increment()
+        })
+      })
+
+      this.decrementButtons.forEach((el) => {
+        el.addEventListener('click', (event) => {
+          event.preventDefault()
+          this.decrement()
+        })
+      })
+
+      this.numberInput.addEventListener('click', (event) => {
+        this.numberInput.select()
+      })
+    }
+
+    private increment() {
+      if (!this.number && this.number != 0) {
+        // Incrementing leads to `0` (it's common to quickly want to achieve the number zero).
+        // But if the minimum is e.g. `1` then it should be that instead.
+        this.numberInput.value = Math.max(...[0, this.minimum]).toString()
+      } else if (isNaN(this.number)) {
+        // Do nothing on weird stuff.
+        return
+      } else if (this.number < this.minimum) {
+        this.numberInput.value = this.minimum.toString()
+      } else {
+        this.numberInput.value = (this.number + 1).toString()
+      }
+    }
+
+    private decrement() {
+      if (!this.number && this.number != 0) {
+        // Decementing empty leads to `-1`.
+        // But if the minimum is e.g. `0` then it should be that instead.
+        this.numberInput.value = Math.max(...[-1, this.minimum]).toString()
+      } else if (isNaN(this.number)) {
+        // Do nothing on weird stuff.
+        return
+      } else if (this.number <= this.minimum) {
+        // Do nothing if at the minimum already
+        return
+      } else {
+        // Normal decrement.
+        this.numberInput.value = (this.number - 1).toString()
+      }
+    }
+
+    private get minimum() {
+      return parseInt(this.numberInput.min)
+    }
+
+    private get number() {
+      return parseInt(this.numberInput.value)
+    }
+
+    private get incrementButtons() {
+      return this.el.querySelectorAll<HTMLLinkElement>('.js-formatic-stepper__increment')
+    }
+
+    private get decrementButtons() {
+      return this.el.querySelectorAll<HTMLLinkElement>('.js-formatic-stepper__decrement')
+    }
+
+    private get numberInput() {
+      return this.el.querySelector<HTMLInputElement>('.js-formatic-stepper__number')
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll<HTMLElement>('.js-formatic-stepper').forEach((el) => {
+    console.debug('Instantiating Formatic.Stepper...')
+    new Formatic.Stepper(el)
+  })
+})

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

@@ -0,0 +1,108 @@
+namespace Formatic {
+  export class Textarea {
+    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 textarea...")
+      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', body: data })
+        .then(response => {
+          if (response.status == 201) {
+            console.debug('Textarea content saved')
+            this.guiSaved()
+          } else {
+            console.debug('Textarea 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-textarea').forEach((el) => {
+      console.debug('Instantiating Formatic.Textarea...')
+      new Formatic.Textarea(el)
+    })
+  })
+}

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

@@ -0,0 +1,81 @@
+namespace Formatic {
+  export class Toggle {
+
+    private el: HTMLElement
+
+    constructor(el: HTMLElement) {
+      this.el = el
+      this.setupBindings()
+    }
+
+    private setupBindings() {
+      this.checkbox.addEventListener('click', (event) => {
+        event.preventDefault()
+        const box = <HTMLInputElement>event.target
+        box.checked ? this.activate(box) : this.deactivate(box)
+      })
+    }
+
+    private activate(box: HTMLInputElement) {
+      const form = box.closest<HTMLFormElement>('form')
+      const data = new FormData(form)
+      data.set('_method', 'patch')
+
+      fetch(form.action, { method: 'POST', body: data })
+        .then(response => {
+          // For accurate user feedback, we make sure this is not an accidental 200.
+          // Your controller needs to respond with 201 on create/update.
+          if (response.status == 201) {
+            console.debug('Activation confirmed')
+            box.checked = true
+          } else {
+            console.debug('Activation not confirmed')
+            console.log("Activation denied")
+          }
+        }).catch(err => {
+          console.warn(err)
+          console.debug('Failed badly to activate')
+        })
+    }
+
+    private deactivate(box: HTMLInputElement) {
+      const form = box.closest<HTMLFormElement>('form')
+      const data = new FormData(form)
+      data.set('_method', 'delete')
+
+      fetch(form.action, { method: 'POST', body: data })
+        .then(response => {
+          // Your controller needs to respond with 204 on destroy.
+          if (response.status == 204) {
+            console.debug('Deactivation confirmed')
+            box.checked = false
+          } else {
+            console.debug('Deactivation not confirmed')
+            console.log("Deactivation denied")
+          }
+        }).catch(err => {
+          console.warn(err)
+          console.debug('Failed badly to deactivate')
+        })
+    }
+
+    // ------------
+    // DOM Elements
+    // ------------
+
+    private get checkbox() {
+      return this.el.querySelector<HTMLInputElement>('input[type="checkbox"]')
+    }
+  }
+}
+
+// --------------
+// Initialization
+// --------------
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll<HTMLElement>('.js-formatic-toggle').forEach((el) => {
+    console.debug('Instantiating Formatic::Toggle...')
+    new Formatic.Toggle(el)
+  })
+})