headmin 0.3.4 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad3c5fca4f0e3c7c03fcf5a1b45887c7e247bb21b37b521a46afed5fe25fdfb6
-  data.tar.gz: 1c2a9d3d91fa0bdc3162e12ddffd44147943ed5035d40919bebf11d8f6e6447d
+  metadata.gz: b427a7de1334a6a27a66b145247d4d09379f25c446e01ff87bb17e46fb6098c6
+  data.tar.gz: bda5b5c568a4872ce1be8e2da62a10d801370967c5beffed0ff27eb12576d407
 SHA512:
-  metadata.gz: ee176196b6f86c2253b5564b9e49b16f58c2b24789856a126a3c98d76a32759d17fa9c0c985206cec590a967de9da26657d04fd3ecba176dbaef20c613558ff3
-  data.tar.gz: ebd63d265dcbfba01c31a84304634dacb4e8a5642577cffab64eddbdcc91a7c2fd1f51d162b67b7bc3ec1fee2ef0695f3c509510f98e6ba7c322c2adaea75c37
+  metadata.gz: 8b0363d0ee6aec32484806ef1e655d681127ae1318f0e391585f81d97b7cce1f28af1368c9038570a28aa0333abfafbc59dbcc65de49862f8248ff2a574edd83
+  data.tar.gz: 4aaaff3a6a1550829bd10e4af436fc6a5bc0515ff6098b1b6761e577365b5816c0bbea2d65e3c2bee1633944a10890079cdb34a263998524e1adaf45e5887df0

data/.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: Tests
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - master
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Install libvips
+        run: sudo apt-get install -y libvips
+      - uses: actions/checkout@master
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler: default
+          bundler-cache: true
+      - name: StandardRb check
+        run: bundle exec standardrb
+      - name: Run tests
+        env:
+          RAILS_ENV: test
+        run: bundle exec rake test

data/.gitignore

@@ -8,6 +8,20 @@
 /tmp/
 /node_modules/
 
+# Ignore dummy app
+/test/dummy/log/*
+/test/dummy/tmp/*
+/test/dummy/db/*.sqlite3
+/test/dummy/db/*.sqlite3-*
+!/test/dummy/log/.keep
+!/test/dummy/tmp/.keep
+/test/dummy/tmp/pids/*
+!/test/dummy/tmp/pids/
+!/test/dummy/tmp/pids/.keep
+/test/dummy/storage/*
+!/test/dummy/storage/.keep
+/test/dummy/public/assets
+
 # Ingore editors
 /.idea
 /headmin.iml

data/.nvmrc

@@ -0,0 +1 @@
+lts/gallium

data/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Headmin Changelog
 
+## HEAD
+- FEATURE: Introduction of a `ViewModel` class to clean up the component views. This allows for a cleaner abstraction and better testing.
+- FEATURE: New `wysiwyg` component which currently defaults to Redactor X. Redactor X will be swapped with a free open source version in the 1.0 release.
+- FEATURE: `headmin/forms/redactorx` now accepts `hybrid: true` to hide the controls
+- FEATURE: `headmin/forms/wysiwyg` accepts a `toolbar: false` to thide the top toolbar
+- FEATURE: Validation highlighting has been added to all form fields
+- FEATURE: Autocomplete suggestions added to `headmin/forms/text`, `headmin/forms/url`, `headmin/forms/email` and `headmin/forms/search`
+- FIX: Readonly inputs didn't show the default greyed out background color
+- FIX: Top corners of repeaters were square
+- FIX: Square corners on group fields are now round
+- BREAK: Passing the names of the blocks in `headmin/forms/blocks` is now required. The `allow` parameter is deprecated in favor of `names`.
+- BREAK: `headmin/card` has been removed
+- BREAK: `headmin/forms/actions` and all of its child components have been removed
+- BREAK: `$font-weight-medium` has been removed from headmin overrides variables. We don't want to introduce new variable names that look like they are part of Bootstrap.
+- BREAK: `headmin/forms/date_range` has a different way of setting attribute specific values. We now have a `:start` and `:end` attribute that accept all possible input options for their respective inputs. Both have a required `:attribute` parameter now.
+
+```erb
+# Old
+<%= render "headmin/forms/date_range", form: form, start_attribute: :start_date, end_attribute: :end_date %>
+
+# New
+<%= render "headmin/forms/date_range", form: form, start: {attribute: :start_date}, end: {attribute: :end_date} %>
+```
+
 ## 0.3
 
 - Support for import maps added

data/Gemfile

@@ -1,11 +1,14 @@
-# frozen_string_literal: true
-
 source "https://rubygems.org"
 
 # Specify your gem's dependencies in headmin.gemspec
 gemspec
 
-gem "rake", "~> 13.0"
-
+gem "capybara", ">= 3.26"
 gem "minitest", "~> 5.0"
+gem "minitest-spec-rails", "~> 6.1"
+gem "rails", "~> 7.0"
+gem "rake", "~> 13.0"
+gem "sprockets-rails", "~> 3.4"
+gem "sqlite3", "~> 1.4"
 gem "standard", "~> 1.7"
+gem "debug"

data/Gemfile.lock

@@ -1,48 +1,191 @@
 PATH
   remote: .
   specs:
-    headmin (0.3.3)
+    headmin (0.3.4)
       closure_tree (~> 7.4)
       inline_svg (~> 1.7)
       redcarpet (~> 3.5)
-      rouge (~> 3.27)
+      rouge (~> 3.28)
 
 GEM
   remote: https://rubygems.org/
   specs:
+    actioncable (7.0.1)
+      actionpack (= 7.0.1)
+      activesupport (= 7.0.1)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
+    actionmailbox (7.0.1)
+      actionpack (= 7.0.1)
+      activejob (= 7.0.1)
+      activerecord (= 7.0.1)
+      activestorage (= 7.0.1)
+      activesupport (= 7.0.1)
+      mail (>= 2.7.1)
+      net-imap
+      net-pop
+      net-smtp
+    actionmailer (7.0.1)
+      actionpack (= 7.0.1)
+      actionview (= 7.0.1)
+      activejob (= 7.0.1)
+      activesupport (= 7.0.1)
+      mail (~> 2.5, >= 2.5.4)
+      net-imap
+      net-pop
+      net-smtp
+      rails-dom-testing (~> 2.0)
+    actionpack (7.0.1)
+      actionview (= 7.0.1)
+      activesupport (= 7.0.1)
+      rack (~> 2.0, >= 2.2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.2.0)
+    actiontext (7.0.1)
+      actionpack (= 7.0.1)
+      activerecord (= 7.0.1)
+      activestorage (= 7.0.1)
+      activesupport (= 7.0.1)
+      globalid (>= 0.6.0)
+      nokogiri (>= 1.8.5)
+    actionview (7.0.1)
+      activesupport (= 7.0.1)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    activejob (7.0.1)
+      activesupport (= 7.0.1)
+      globalid (>= 0.3.6)
     activemodel (7.0.1)
       activesupport (= 7.0.1)
     activerecord (7.0.1)
       activemodel (= 7.0.1)
       activesupport (= 7.0.1)
+    activestorage (7.0.1)
+      actionpack (= 7.0.1)
+      activejob (= 7.0.1)
+      activerecord (= 7.0.1)
+      activesupport (= 7.0.1)
+      marcel (~> 1.0)
+      mini_mime (>= 1.1.0)
     activesupport (7.0.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
     ast (2.4.2)
+    builder (3.2.4)
+    capybara (3.36.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.8)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
     closure_tree (7.4.0)
       activerecord (>= 4.2.10)
       with_advisory_lock (>= 4.0.0)
     concurrent-ruby (1.1.9)
+    crass (1.0.6)
+    debug (1.4.0)
+      irb (>= 1.3.6)
+      reline (>= 0.2.7)
+    digest (3.1.0)
+    erubi (1.10.0)
+    globalid (1.0.0)
+      activesupport (>= 5.0)
     i18n (1.9.1)
       concurrent-ruby (~> 1.0)
     inline_svg (1.8.0)
       activesupport (>= 3.0)
       nokogiri (>= 1.6)
+    io-console (0.5.11)
+    io-wait (0.2.1)
+    irb (1.4.1)
+      reline (>= 0.3.0)
+    loofah (2.13.0)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    mail (2.7.1)
+      mini_mime (>= 0.1.1)
+    marcel (1.0.2)
+    matrix (0.4.2)
+    method_source (1.0.0)
+    mini_mime (1.1.2)
     minitest (5.14.4)
+    minitest-spec-rails (6.1.0)
+      minitest (>= 5.0)
+      railties (>= 4.1)
+    net-imap (0.2.3)
+      digest
+      net-protocol
+      strscan
+    net-pop (0.1.1)
+      digest
+      net-protocol
+      timeout
+    net-protocol (0.1.2)
+      io-wait
+      timeout
+    net-smtp (0.3.1)
+      digest
+      net-protocol
+      timeout
+    nio4r (2.5.8)
+    nokogiri (1.13.1-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.13.1-x86_64-darwin)
       racc (~> 1.4)
+    nokogiri (1.13.1-x86_64-linux)
+      racc (~> 1.4)
     parallel (1.21.0)
     parser (3.1.0.0)
       ast (~> 2.4.1)
+    public_suffix (4.0.6)
     racc (1.6.0)
+    rack (2.2.3)
+    rack-test (1.1.0)
+      rack (>= 1.0, < 3)
+    rails (7.0.1)
+      actioncable (= 7.0.1)
+      actionmailbox (= 7.0.1)
+      actionmailer (= 7.0.1)
+      actionpack (= 7.0.1)
+      actiontext (= 7.0.1)
+      actionview (= 7.0.1)
+      activejob (= 7.0.1)
+      activemodel (= 7.0.1)
+      activerecord (= 7.0.1)
+      activestorage (= 7.0.1)
+      activesupport (= 7.0.1)
+      bundler (>= 1.15.0)
+      railties (= 7.0.1)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.4.2)
+      loofah (~> 2.3)
+    railties (7.0.1)
+      actionpack (= 7.0.1)
+      activesupport (= 7.0.1)
+      method_source
+      rake (>= 12.2)
+      thor (~> 1.0)
+      zeitwerk (~> 2.5)
     rainbow (3.1.1)
     rake (13.0.3)
     redcarpet (3.5.1)
     regexp_parser (2.2.0)
+    reline (0.3.1)
+      io-console (~> 0.5)
     rexml (3.2.5)
-    rouge (3.27.0)
+    rouge (3.28.0)
     rubocop (1.25.0)
       parallel (~> 1.10)
       parser (>= 3.1.0.0)
@@ -58,22 +201,47 @@ GEM
       rubocop (>= 1.7.0, < 2.0)
       rubocop-ast (>= 0.4.0)
     ruby-progressbar (1.11.0)
+    sprockets (4.0.2)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.4.2)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
+      sprockets (>= 3.0.0)
+    sqlite3 (1.4.2)
     standard (1.7.0)
       rubocop (= 1.25.0)
       rubocop-performance (= 1.13.2)
+    strscan (3.0.1)
+    thor (1.2.1)
+    timeout (0.2.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.1.0)
+    websocket-driver (0.7.5)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.5)
     with_advisory_lock (4.6.0)
       activerecord (>= 4.2)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
+    zeitwerk (2.5.4)
 
 PLATFORMS
+  arm64-darwin-21
   x86_64-darwin-19
+  x86_64-linux
 
 DEPENDENCIES
+  capybara (>= 3.26)
+  debug
   headmin!
   minitest (~> 5.0)
+  minitest-spec-rails (~> 6.1)
+  rails (~> 7.0)
   rake (~> 13.0)
+  sprockets-rails (~> 3.4)
+  sqlite3 (~> 1.4)
   standard (~> 1.7)
 
 BUNDLED WITH

data/README.md

@@ -4,6 +4,7 @@ A complete library of commonly used components to build an admin interface in yo
 
 [![Gem Version](https://badge.fury.io/rb/headmin.svg)](https://rubygems.org/gems/headmin)
 [![npm version](https://badge.fury.io/js/headmin.svg)](https://www.npmjs.com/package/headmin)
+[![Test suite](https://github.com/frontierdotbe/headmin/actions/workflows/ci.yml/badge.svg)](https://github.com/frontierdotbe/headmin/actions/workflows/ci.yml)
 
 ## Installation
 
@@ -88,6 +89,12 @@ When adding new dependencies, make sure you add them to the `package.json` file
 
 ## Testing
 
+Run tests with 
+
+```shell
+rake test
+```
+
 If you want to test a specific feature in a staging environment without releasing the gem, you can refer to the remote
 repo in your Gemfile and package.json.
 

data/Rakefile

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 require "bundler/gem_tasks"
 require "rake/testtask"
 
@@ -9,8 +7,4 @@ Rake::TestTask.new(:test) do |t|
   t.test_files = FileList["test/**/*_test.rb"]
 end
 
-require "rubocop/rake_task"
-
-RuboCop::RakeTask.new
-
-task default: %i[test rubocop]
+task default: %i[test]

data/app/assets/javascripts/headmin/config/i18n.js

@@ -1,11 +1,11 @@
 export default class {
-    static get locale() {
-        if (window.I18n === undefined) {
-            const locale = document.querySelector('html').getAttribute('lang')
-            window.I18n = {
-                locale: locale || 'en'
-            }
-        }
-        return window.I18n.locale
+  static get locale () {
+    if (window.I18n === undefined) {
+      const locale = document.querySelector('html').getAttribute('lang')
+      window.I18n = {
+        locale: locale || 'en'
+      }
     }
-}
+    return window.I18n.locale
+  }
+}

data/app/assets/javascripts/headmin/controllers/autocomplete_controller.js

@@ -0,0 +1,255 @@
+/* global fetch */
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['input', 'dropdown', 'dropdownItem']
+  }
+
+  static get values () {
+    return {
+      url: String
+    }
+  }
+
+  connect () {
+    // Focus
+    this.inputTarget.addEventListener('focus', (event) => {
+      this.show()
+    })
+
+    // Typing
+    this.inputTarget.addEventListener('keydown', (event) => {
+      this.handleKeydown(event)
+    })
+
+    // Clicked outside dropdown
+    document.addEventListener('click', (event) => {
+      this.handleOutsideClick(event)
+    })
+  }
+
+  handleKeydown (event) {
+    this.show()
+
+    const keyCode = parseInt(event.keyCode, 10)
+    if (this.isArrowKey(keyCode)) {
+      this.handleArrowKey(keyCode)
+    } else if (this.isEnterKey(keyCode)) {
+      this.selectActiveItem()
+    } else {
+      this.handleTextKey()
+    }
+  }
+
+  selectActiveItem () {
+    this.activeItem().click()
+  }
+
+  isEnterKey (keyCode) {
+    return keyCode === 13
+  }
+
+  handleArrowKey (keyCode) {
+    switch (keyCode) {
+      case 38:
+        this.handleArrowUp()
+        break
+      case 40:
+        this.handleArrowDown()
+        break
+      default:
+    }
+  }
+
+  handleArrowUp () {
+    this.selectPreviousItem()
+  }
+
+  handleArrowDown () {
+    this.selectNextItem()
+  }
+
+  selectNextItem () {
+    const next = this.nextItem()
+    this.deselectAll()
+    next.classList.add('active')
+  }
+
+  nextItem () {
+    const current = this.activeItem()
+
+    // Select first item if nothing selected
+    if (!this.hasSelectedItem()) {
+      return this.firstItem()
+    }
+
+    if (this.isItemLast(current)) {
+      return this.firstItem()
+    } else {
+      const index = this.itemIndex(current)
+      return this.itemAtIndex(index + 1)
+    }
+  }
+
+  selectPreviousItem () {
+    const previous = this.previousItem()
+    this.deselectAll()
+    previous.classList.add('active')
+  }
+
+  previousItem () {
+    const current = this.activeItem()
+
+    // Select last item if nothing selected
+    if (!this.hasSelectedItem()) {
+      return this.lastItem()
+    }
+
+    if (this.isItemFirst(current)) {
+      return this.lastItem()
+    } else {
+      const index = this.itemIndex(current)
+      return this.itemAtIndex(index - 1)
+    }
+  }
+
+  deselectAll () {
+    this.dropdownItemTargets.forEach(dropdownItem => {
+      dropdownItem.classList.remove('active')
+    })
+  }
+
+  itemAtIndex (index) {
+    return this.dropdownItemTargets[index]
+  }
+
+  firstItem () {
+    return this.itemAtIndex(0)
+  }
+
+  lastItem () {
+    return this.itemAtIndex(this.dropdownItemTargets.length - 1)
+  }
+
+  hasSelectedItem () {
+    return this.activeItem() !== undefined
+  }
+
+  activeItem () {
+    return this.dropdownItemTargets.find((item) => {
+      return item.classList.contains('active')
+    })
+  }
+
+  isItemLast (item) {
+    return this.itemIndex(item) === this.dropdownItemTargets.length - 1
+  }
+
+  isItemFirst (item) {
+    return this.itemIndex(item) === 0
+  }
+
+  itemIndex (item) {
+    return Array.from(this.dropdownItemTargets).indexOf(item)
+  }
+
+  handleTextKey () {
+    // 1. fetch info
+    this.fetchCollection().then((html) => {
+      // 2. render html
+      this.renderCollection(html)
+    }).then(() => {
+      // 3. sort by relevance
+      // ...
+      // 4. Highlight
+      this.highlight()
+    })
+  }
+
+  show () {
+    if (this.isDropdownEmpty()) {
+      this.dropdownTarget.classList.remove('d-none')
+    } else {
+      this.hide()
+    }
+  }
+
+  hide () {
+    this.dropdownTarget.classList.add('d-none')
+  }
+
+  isDropdownEmpty () {
+    return this.dropdownTarget.textContent.trim().length > 0
+  }
+
+  isArrowKey (keyCode) {
+    const arrowKeyCodes = [37, 38, 39, 40]
+    return arrowKeyCodes.includes(keyCode)
+  }
+
+  fetchCollection () {
+    if (this.isRemote()) {
+      return fetch(this.urlValue).then((response) => {
+        return response.text()
+      }).catch((error) => {
+        console.error('The URL you provided for the autocomplete collection didn\'t return a successful result', error)
+      })
+    } else {
+      return Promise.resolve(this.dropdownTarget.innerHTML)
+    }
+  }
+
+  renderCollection (html) {
+    this.dropdownTarget.innerHTML = html
+  }
+
+  isRemote () {
+    return this.hasUrlValue
+  }
+
+  highlight () {
+    const query = this.value()
+    this.dropdownItemTargets.forEach(dropdownItem => {
+      let text = dropdownItem.innerHTML
+
+      // Clean up past results
+      text = text.replace(/<mark.*?>(.*?)<\/mark>/ig, '$1')
+
+      // Highlight query
+      const regex2 = new RegExp(`(${query})`, 'gi')
+      text = text.replace(regex2, '<mark>$1</mark>')
+
+      dropdownItem.innerHTML = text
+    })
+  }
+
+  select (event) {
+    this.inputTarget.value = event.target.getAttribute('value')
+    this.hide()
+  }
+
+  value () {
+    return this.inputTarget.value
+  }
+
+  numberOfCharacters () {
+    return this.value().length
+  }
+
+  handleOutsideClick (event) {
+    if (!this.isClickedInside(event)) {
+      this.hide()
+    }
+  }
+
+  isClickedInside (event) {
+    if (!event) {
+      return false
+    }
+    const inInput = this.inputTarget.contains(event.target)
+    const inDropdown = this.dropdownTarget.contains(event.target)
+
+    return (inInput || inDropdown)
+  }
+}