frontpack 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: df0faa6eaf72f4c463429cf921ca5b4787a86a824b495605e2749ef02808099a
+  data.tar.gz: 4196fb91c2dfdf7ffb84cb3fb51e69d6e066e204dc3f216e1f8968ea2deb917b
+SHA512:
+  metadata.gz: 0a6b40d4a9068b6b320db01776623f4b3fff5366c3926efb301bd5cd2e0e5c7c0c1a39aa9f967393f2a9e27e06ee3703e0719d9cffd1b46eb341189725c7f6c1
+  data.tar.gz: 479e6c6cf85251fb224891e46213a6552d67d4bd074bbd493a952bf6acfd558ce44e3de972886434110887c1f17b92068af7b83cc3ec98e4c02676c05a22bc14

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Francis Schiavo
+
+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,51 @@
+# Frontpack
+
+This project aims to provide a standard front-end development environment for Ruby on Rails applications.
+
+Key features:
+* New form builder with options for enum fields, toggle fields, and autocomplete fields.
+* New methods for ActiveRecord models to easily translate enum field names and values.
+* New methods for ActiveRecord models to easily expose autocomplete endpoints.
+* Integrated sass files for customizing the front end (kinda of a mix including some boostrap and tailwind features).
+* Integrated javascript files and web components for customizing the front end and form builder.
+
+## Goals
+
+Allow even faster development of Rails applications by adding more features for front-end.
+Some of the features will be simple extensions for Rails form builders.
+
+Other features will be more complex, like having a standard CSS lib and web components. The idea is to provide a high degree
+of customization for the front-end, while keeping a standard development process.
+
+Realistically this project will not replace the need for a project specific front-end for larger projects, but it can
+be a good alternative for internal use applications where faster development time matters more than a creative and unique UI.
+
+Also, this project will likely be a lot more open to contributions since the idea is to provide a wide range of options
+out of the box. As long as a feature is not too specific it will be welcome here.
+
+Keep in mind this project will favor faster development over a faster runtime. That means we won't bother losing a few
+milliseconds of page load time if that means we can save a few hours of development time.
+
+## Setup
+
+Run `bundle add frontpack`
+
+Or manually add this line to your application's Gemfile:
+
+```ruby
+gem 'frontpack'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+## TODO
+Possibly remove the embedded css files and make it a plugin for this gem. It already works fine with Bootstrap.
+
+## Contributing
+WIP
+
+## 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,5 @@
+# frozen_string_literal: true
+
+require 'bundler/setup'
+
+require 'bundler/gem_tasks'

data/app/assets/config/frontpack_manifest.js

@@ -0,0 +1 @@
+//= link_tree ../javascripts/frontpack .js

data/app/assets/images/logo.svg

@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+        xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        width="200"
+        height="120"
+        viewBox="0 0 52.916665 31.750001"
+        version="1.1"
+        id="svg8"
+        inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+        sodipodi:docname="logo.svg">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient899"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop897" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient899"
+       id="linearGradient901"
+       x1="3.5352253"
+       y1="276.21649"
+       x2="46.7946"
+       y2="276.21649"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.959798"
+     inkscape:cx="113.07665"
+     inkscape:cy="45.395589"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-265.24998)">
+    <path
+       style="clip-rule:evenodd;fill:#d40000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 19.732038,290.78116 c 5.677843,0.77521 11.254806,1.53656 16.942571,2.3128 -1.937817,-3.22611 -3.825815,-6.36975 -5.728902,-9.53899 z"
+       id="path927" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 38.277123,272.92384 c -0.500476,0.75165 -1.001985,1.50266 -1.50184,2.25472 -1.716624,2.58258 -3.433041,5.16517 -5.148013,7.749 -0.0955,0.14387 -0.219332,0.25799 -0.08475,0.47981 1.657089,2.73637 3.301154,5.48083 4.949353,8.22279 0.260057,0.43308 0.523009,0.86452 0.859347,1.28004 0.333236,-6.65503 0.666266,-13.31025 0.999296,-19.96528 z"
+       id="path925" />
+    <path
+       style="clip-rule:evenodd;fill:#d40000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 15.655675,281.4559 c 0.07753,0.0733 0.271013,0.11617 0.361145,0.0717 1.58949,-0.7812 3.189109,-1.54504 4.74387,-2.39054 0.50709,-0.27556 0.896969,-0.76963 1.333773,-1.17026 1.446439,-1.32653 2.890603,-2.65575 4.334147,-3.9852 0.08828,-0.0817 0.192873,-0.16062 0.245587,-0.26357 0.51846,-1.01335 1.028031,-2.03188 1.555587,-3.07975 -0.629057,-0.23649 -1.225451,-0.46781 -1.829288,-0.67825 -0.08187,-0.0286 -0.210857,0.0282 -0.299542,0.0774 -1.39765,0.7808 -2.821556,1.52004 -4.174761,2.37152 -0.677017,0.42606 -1.228554,1.05388 -1.828049,1.60067 -0.966221,0.88187 -1.931204,1.76582 -2.883366,2.66299 -0.252615,0.23815 -0.482904,0.5102 -0.679704,0.79671 -0.651177,0.94824 -1.282921,1.91011 -1.943607,2.89928 0.369207,0.38183 0.704924,0.74688 1.064208,1.08716 z"
+       id="path923" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 21.464994,280.15955 c -0.790714,3.34042 -1.576673,6.66203 -2.388886,10.09281 3.80845,-2.45401 7.529043,-4.85137 11.225037,-7.23261 -2.94125,-0.95194 -5.872989,-1.90102 -8.836151,-2.8602 z"
+       id="path921" />
+    <path
+       style="clip-rule:evenodd;fill:#ff8080;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 37.306354,272.95609 c -3.217845,0.53768 -6.358788,1.06235 -9.540248,1.59383 1.08364,2.63593 2.145573,5.21891 3.237689,7.8753 2.112911,-3.17506 4.184066,-6.28643 6.302559,-9.46913 z"
+       id="path919" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 21.59771,279.47633 c 2.89763,0.94058 5.737585,1.86255 8.660024,2.81142 -1.085294,-2.64399 -2.133378,-5.19556 -3.203168,-7.80109 -1.82226,1.66598 -3.617232,3.30736 -5.456856,4.98967 z"
+       id="path917" />
+    <path
+       style="clip-rule:evenodd;fill:#ff2a2a;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 15.775368,283.40385 c -1.027618,2.45648 -2.0203,4.82944 -3.030968,7.2452 1.942367,-0.0575 3.825195,-0.11301 5.772729,-0.17054 -0.914335,-2.35911 -1.810683,-4.67193 -2.741761,-7.07466 z"
+       id="path915" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 18.585347,288.79848 0.07153,-0.0156 c 0.693141,-2.88193 1.396205,-5.74401 2.103816,-8.73858 -1.578535,0.82048 -3.084302,1.60293 -4.631207,2.40707 0.789474,2.05192 1.631249,4.21651 2.455865,6.34722 z"
+       id="path913" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 36.141679,272.48868 c -0.921776,-0.24414 -1.843553,-0.4891 -2.765742,-0.73158 -1.325505,-0.34854 -2.652045,-0.69274 -3.976723,-1.04437 -0.165585,-0.0441 -0.285278,-0.0728 -0.382644,0.12674 -0.468227,0.95919 -0.950923,1.91115 -1.426592,2.86683 -0.01468,0.0295 -0.01153,0.0678 -0.02294,0.14202 2.870551,-0.43495 5.721875,-0.86721 8.572786,-1.29926 z"
+       id="path911" />
+    <path
+       style="clip-rule:evenodd;fill:#ff0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 30.793971,270.30693 7.51292,2.0784 c -0.43081,-1.22774 -0.830404,-2.36615 -1.241369,-3.53703 l -6.260593,1.38815 z"
+       id="path909" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 19.222261,291.33456 c -0.930458,-0.10725 -1.885725,-0.008 -2.829413,0.008 -0.77521,0.0137 -1.55042,0.0426 -2.32563,0.0669 -0.07979,0.003 -0.159382,0.0185 -0.238971,0.10463 6.409022,0.59247 12.817836,1.18493 19.22665,1.77782 l 0.01304,-0.0855 c -2.054408,-0.28051 -4.109023,-0.56104 -6.163434,-0.84135 -2.560052,-0.34957 -5.115763,-0.73408 -7.682224,-1.0299 z"
+       id="path907" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 12.871122,288.43775 c 0.825857,-1.91632 1.648198,-3.83388 2.477364,-5.74874 0.08289,-0.19206 0.07648,-0.3225 -0.08579,-0.47712 -0.346881,-0.33014 -0.669161,-0.68592 -1.048291,-1.08033 -0.512464,2.53028 -1.012321,4.99793 -1.512589,7.46537 l 0.05602,0.0262 c 0.03824,-0.0614 0.08497,-0.11946 0.113283,-0.18543 z"
+       id="path905" />
+    <path
+       style="clip-rule:evenodd;fill:#aa0000;fill-rule:evenodd;stroke-width:0.20672259"
+       d="m 29.14846,269.80108 c 1.392689,-0.35927 2.805639,-0.64021 4.210318,-0.9536 0.09096,-0.0205 0.179849,-0.0505 0.26936,-0.0761 l -0.01386,-0.0687 c -1.978541,0.26606 -3.956876,0.53232 -6.035059,0.81201 0.566627,0.24744 1.003225,0.43226 1.569231,0.28631 z"
+       id="path81" />
+    <text
+       xml:space="preserve"
+       style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:19.75555611px;line-height:1.25;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ff5555;fill-opacity:1;stroke:#ffffff;stroke-width:0.26458332;stroke-opacity:1"
+       x="-1.0690777"
+       y="284.57193"
+       id="text12"><tspan
+         sodipodi:role="line"
+         id="tspan10"
+         x="-1.0690777"
+         y="284.57193"
+         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:19.75555611px;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ff5555;stroke:#ffffff;stroke-width:0.26458332;stroke-opacity:1">Genesis</tspan></text>
+  </g>
+</svg>

data/app/assets/javascripts/frontpack/auto-complete.js

@@ -0,0 +1,173 @@
+class AutoComplete extends HTMLInputElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.addEventListener('keydown', this.onKeyDown.bind(this));
+        this.addEventListener('keyup', this.onKeyUp.bind(this));
+        this.addEventListener('blur', this.onBlur.bind(this));
+
+        this.hiddenInput = document.createElement('input');
+        this.hiddenInput.type = 'hidden';
+        this.hiddenInput.name = this.name;
+        this.hiddenInput.value = this.value;
+        this.parentElement.appendChild(this.hiddenInput);
+        this.removeAttribute('name');
+        this.value = this.getAttribute('display-value');
+
+        this.items = document.createElement('ul');
+        this.items.style.display = 'none';
+        this.items.style.position = 'absolute';
+        this.items.className = this.autocompleteStyle || 'auto-complete-list';
+        this.items.addEventListener('click', this.onItemClick.bind(this));
+
+        this.parentElement.appendChild(this.items);
+        this.lastUsedTerm = '';
+    }
+
+    set selectedItemIndex(value) {
+        if (value >= this.items.childNodes.length) {
+            this._selectedItemIndex = 0
+        } else if (value < 0) {
+            this._selectedItemIndex = this.items.childNodes.length - 1;
+        } else {
+            this._selectedItemIndex = value;
+        }
+        this.updateSelection();
+    }
+
+    async fetchData() {
+        this.lastUsedTerm = this.value;
+        let response = await fetch(`${this.url}/${encodeURIComponent(this.value)}`, {
+            cache: 'reload',
+            headers: {'Content-Type': 'application/json'},
+            mode: 'cors',
+            credentials: 'same-origin'
+        });
+        let data = await response.json();
+        this.updateList(data);
+    }
+
+    updateListPosition() {
+        let rect = this.getBoundingClientRect();
+        this.items.style.width = rect.width + 'px';
+        this.items.style.left = rect.left + 'px';
+        this.items.style.top = rect.bottom + 'px';
+
+    }
+
+    updateList(data) {
+        this.items.innerHTML = '';
+        for (let item of data) {
+            let li = document.createElement('li');
+            li.dataset.key = item.id;
+            li.dataset.value = item.value;
+            li.innerText = item.label || item.value;
+            this.items.appendChild(li);
+        }
+        this.selectedItemIndex = 0;
+        this.items.style.display = 'inline-block';
+        this.updateListPosition();
+    }
+
+    onBlur() {
+        if (this._timeout) {
+            window.clearTimeout(this._timeout);
+        }
+
+        window.setTimeout(_ => { this.items.style.display = 'none'; }, 100)
+    }
+
+    get url() {
+        return this.dataset.url;
+    }
+
+    get autocompleteStyle() {
+        return this.getAttribute('autocomplete-style');
+    }
+
+    get selectedItemIndex() {
+        return this._selectedItemIndex;
+    }
+
+    previousItem() {
+        this.selectedItemIndex--;
+    }
+
+    nextItem() {
+        this.selectedItemIndex++;
+    }
+
+    updateSelection() {
+        if (this.selectedItem) {
+            this.selectedItem.classList.remove('selected');
+        }
+        this.selectedItem = this.items.childNodes[this.selectedItemIndex];
+        this.selectedItem.classList.add('selected');
+        this.previewItem(this.selectedItem);
+    }
+
+    previewItem(item) {
+        this.value = item.innerText;
+        this.hiddenInput.value = item.dataset.key;
+    }
+
+    selectItem(item) {
+        this.value = item.innerText;
+        this.hiddenInput.value = item.dataset.key;
+        this.items.style.display = 'none';
+    }
+
+    onKeyDown(event) {
+        let key = event.code.toLowerCase();
+        if (['enter'].includes(key)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    onKeyUp(event) {
+        let key = event.code.toLowerCase();
+        if (['arrowdown', 'enter', 'arrowup', 'insert', 'tab'].includes(key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (key === 'arrowdown') {
+                this.nextItem();
+            } else if (key === 'arrowup') {
+                this.previousItem();
+            } else if (key === 'enter') {
+                if (this.value !== '') {
+                    this.selectItem(this.selectedItem);
+                } else {
+                    this.value = '';
+                    this.hiddenInput.value = '';
+                }
+            }
+        } else {
+            if (this.value === this.lastUsedTerm) {
+                return
+            }
+
+            this.items.style.display = 'none';
+
+            if (this._timeout) {
+                window.clearTimeout(this._timeout);
+            }
+
+            if (this.value.length < this.minLength) {
+                return;
+            }
+
+            this._timeout = window.setTimeout(this.fetchData.bind(this), 500);
+        }
+    }
+
+    onItemClick(event) {
+        let item = event.target;
+        if (item.tagName.toLowerCase() === 'li') {
+            this.selectItem(item);
+        }
+    }
+}
+customElements.define('auto-complete', AutoComplete, { extends: 'input' });

data/app/assets/javascripts/frontpack/base-webcomponent.js

@@ -0,0 +1,160 @@
+class BaseWebComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.bindableElements = new Map();
+    this.bindableAttributes = new Map();
+    this.attachShadow({mode: 'open'});
+    this.shadowRoot.innerHTML = this.template();
+  }
+
+  template() {
+    return '<slot></slot>';
+  }
+
+  domTreeLoaded() {
+    // Placeholder
+  }
+
+  raiseEvent(eventName, detail, cancelable = true, bubbles = true) {
+    let event = new CustomEvent(eventName, { bubbles: bubbles, cancelable: cancelable, detail: detail });
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * This function registers "magic events".
+   * Magic events are special methods following a name pattern to auto register event listeners.
+   * The name pattern consists of the event trigger followed by a dollar sign and the method name.
+   * Pattern sample: click$sayHello
+   */
+  registerEvents() {
+    for (let prop of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
+      if (prop.indexOf('$') > 0 && typeof this[prop] === 'function') {
+        let [_, listener] = /^([a-z]+)\$.+/.exec(prop);
+        this.addEventListener(listener, this[prop].bind(this));
+      }
+    }
+  }
+
+  prepareBindableElements() {
+    for (let [attr, _] of this.bindableElements) {
+      // Save a reference to the bindable element
+      let element = this.shadowRoot.getElementById(attr);
+      if (!element) { throw new Error(`Element ${attr} not found.`); }
+      this.bindableElements.set(attr, element);
+      element.innerText = this.getAttribute(attr);
+
+      Object.defineProperty(this, attr, {
+        get() {
+          return this.getAttribute(attr);
+        },
+        set(value) {
+          this.setAttribute(attr, value);
+          let element = this.bindableElements.get(attr);
+          element.innerText = value;
+        }
+      })
+    }
+  }
+
+  prepareBindableAttributes(nodes) {
+    for (let node of nodes) {
+      if (node.nodeType !== 1) { continue; }
+      for (let attr of node.attributes) {
+        let result = /^%([a-z]+)$/.exec(attr.value);
+        if (!result) {
+          continue
+        }
+        let [_, name] = result
+        if (name) {
+          this.bindableAttributes.set(name, attr);
+          attr.value = this.getAttribute(name);
+
+          Object.defineProperty(this, name, {
+            get() {
+              return this.getAttribute(attr);
+            },
+            set(value) {
+              this.setAttribute(name, value);
+              let attribute = this.bindableAttributes.get(name);
+              attribute.value = value;
+            }
+          })
+        }
+      }
+
+      this.prepareBindableAttributes(node.childNodes);
+    }
+  }
+
+  /**
+   * Called by native code when this element is attached to the DOMTree
+   */
+  connectedCallback() {
+    this.prepareBindableElements();
+    this.prepareBindableAttributes(this.shadowRoot.childNodes);
+    this.registerEvents();
+    if (document.readyState === 'interactive') {
+      this.domTreeLoaded();
+    } else {
+      document.addEventListener('readystatechange', event => {
+        if (event.target.readyState === 'interactive') {
+          this.domTreeLoaded();
+        }
+      })
+    }
+  }
+
+  defineBindableElement(...attrs) {
+    for (let attr of attrs) {
+      this.bindableElements.set(attr, null);
+    }
+  }
+
+  defineBindableAttribute(...attrs) {
+    for (let attr of attrs) {
+      this.bindableAttributes.set(attr, null);
+    }
+  }
+
+  _camelize(text) {
+    let words = text.split('-');
+    for (let i = 1; i < words.length; i++) {
+      words[i] = words[i][0].toUpperCase() + words[i].slice(1);
+    }
+    return words.join('');
+  }
+
+  defineAttribute(...attrs) {
+    for (let prop of attrs) {
+      let name = '';
+      let defaultValue = null;
+
+      if (typeof prop === 'string') {
+        name = prop;
+      } else {
+        name = prop[0]
+        defaultValue = prop[1]
+      }
+      let propName = this._camelize(name);
+
+      Object.defineProperty(this, propName, {
+        get() {
+          return this.getAttribute(name) || defaultValue;
+        },
+        set(value) {
+          this.setAttribute(name, value);
+         }
+      })
+    }
+  }
+
+  findParentElement(tagName, node = this) {
+    if (node.parentNode.tagName.toUpperCase() === tagName.toUpperCase()) {
+      return node.parentNode;
+    } else {
+      this.findParentElement(tagName, node.parentNode);
+    }
+  }
+}
+
+module.exports = BaseWebComponent;

data/app/assets/javascripts/frontpack/expandable-list.js

@@ -0,0 +1,99 @@
+class ExpandableList extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.innerHTML = `
+<style>
+  :host(*) {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content 1fr;    
+  }
+
+  #label {
+    display: block;
+    padding: .5rem;
+    font-weight: bold;
+  }
+  
+  #area {
+    overflow-x: auto;
+  }
+  
+  h3 {
+    margin: 0;
+  }
+  
+</style>
+<h3 id="label"></h3>
+<div id="area">
+  <slot></slot>
+</div>
+`;
+  }
+
+  connectedCallback() {
+    this.label = this.shadowRoot.getElementById('label');
+    this.label.innerText = this.getAttribute('caption');
+  }
+}
+
+customElements.define('expandable-list', ExpandableList);
+
+class ExpandableItem extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({mode: 'open'});
+    shadowRoot.innerHTML = `
+<style>
+  #label {
+    display: block;
+    padding: .5rem;
+    font-weight: bold;
+    cursor: pointer;
+  }
+</style>
+<span id="label"></span>
+<div id="area">
+  <slot></slot>
+</div>
+`;
+  }
+
+  connectedCallback() {
+    this.label = this.shadowRoot.getElementById('label');
+    this.label.innerText = this.getAttribute('caption');
+    this.label.addEventListener('click', this.toggle.bind(this));
+    this.area = this.shadowRoot.getElementById('area');
+    this.expanded = this.hasAttribute('expanded') || this.parentNode.hasAttribute('expanded');
+  }
+
+  set expanded(value) {
+    this._expanded = value;
+    if (value) {
+      this.setAttribute('expanded', 'expanded');
+    } else {
+      this.removeAttribute('expanded');
+    }
+
+    this.area.style.display = this._expanded ? 'block' : 'none';
+  }
+
+  get expanded() {
+    return this._expanded;
+  }
+
+  expand() {
+    this.expanded = true;
+  }
+
+  collapse() {
+    this.expanded = false;
+  }
+
+  toggle() {
+    this.expanded = !this.expanded;
+  }
+}
+
+customElements.define('expandable-item', ExpandableItem);