formatic 0.1.0

data/app/assets/javascript/formatic.js

@@ -0,0 +1,350 @@
+var Formatic;
+(function (Formatic) {
+    class Date {
+        constructor(el) {
+            this.el = el;
+            this.setupBindings();
+        }
+        setupBindings() {
+            this.shortcutButtons.forEach((el) => {
+                el.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    const shortcut = event.currentTarget;
+                    this.dayInput.value = shortcut.dataset.day;
+                    this.monthInput.value = shortcut.dataset.month;
+                    this.yearInput.value = shortcut.dataset.year;
+                });
+            });
+        }
+        get dayInput() {
+            return this.el.querySelector('.js-formatic-date__day');
+        }
+        get monthInput() {
+            return this.el.querySelector('.js-formatic-date__month');
+        }
+        get yearInput() {
+            return this.el.querySelector('.js-formatic-date__year');
+        }
+        get shortcutButtons() {
+            return this.el.querySelectorAll('.js-formatic-date__shortcut');
+        }
+    }
+    Formatic.Date = Date;
+})(Formatic || (Formatic = {}));
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.js-formatic-date').forEach((el) => {
+        console.debug('Instantiating Formatic.Date...');
+        new Formatic.Date(el);
+    });
+});
+var Formatic;
+(function (Formatic) {
+    class Select {
+        constructor(el) {
+            this.el = el;
+            this.setupBindings();
+        }
+        setupBindings() {
+            this.autosize();
+            this.el.addEventListener('input', (event) => {
+                event.preventDefault();
+                if (this.autoSubmit)
+                    this.actionSave();
+            });
+        }
+        actionSave() {
+            this.guiWaitingForSave();
+            this.debounce(this.actionSaveNow.bind(this))();
+        }
+        actionSaveNow() {
+            console.debug("Saving select...");
+            this.el.classList.remove('is-loading');
+            this.el.classList.add('is-saved');
+            this.save();
+        }
+        guiWaitingForSave() {
+            this.el.classList.add('is-loading');
+            this.el.classList.remove('is-saved');
+            this.el.classList.remove('is-failed');
+        }
+        guiSaved() {
+            this.el.classList.remove('is-loading');
+            this.el.classList.add('is-saved');
+            this.el.classList.remove('is-failed');
+        }
+        guiFailed() {
+            this.el.classList.remove('is-loading');
+            this.el.classList.remove('is-saved');
+            this.el.classList.add('is-failed');
+        }
+        get autoSubmit() {
+            return this.el.classList.contains('is-autosubmit');
+        }
+        save() {
+            const form = this.el.closest('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');
+            });
+        }
+        debounce(fn) {
+            return () => {
+                clearTimeout(this.timeoutId);
+                this.timeoutId = setTimeout(() => fn(), 1000);
+            };
+        }
+        autosize() {
+            try {
+                autosize(this.el);
+            }
+            catch (error) {
+                console.warn(`Formatic is missing the autosize library`);
+            }
+        }
+    }
+    Formatic.Select = Select;
+})(Formatic || (Formatic = {}));
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.js-formatic-select').forEach((el) => {
+        console.debug('Instantiating Formatic.Select...');
+        new Formatic.Select(el);
+    });
+});
+var Formatic;
+(function (Formatic) {
+    class Stepper {
+        constructor(el) {
+            this.el = el;
+            this.setupBindings();
+        }
+        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();
+            });
+        }
+        increment() {
+            if (!this.number && this.number != 0) {
+                this.numberInput.value = Math.max(...[0, this.minimum]).toString();
+            }
+            else if (isNaN(this.number)) {
+                return;
+            }
+            else if (this.number < this.minimum) {
+                this.numberInput.value = this.minimum.toString();
+            }
+            else {
+                this.numberInput.value = (this.number + 1).toString();
+            }
+        }
+        decrement() {
+            if (!this.number && this.number != 0) {
+                this.numberInput.value = Math.max(...[-1, this.minimum]).toString();
+            }
+            else if (isNaN(this.number)) {
+                return;
+            }
+            else if (this.number <= this.minimum) {
+                return;
+            }
+            else {
+                this.numberInput.value = (this.number - 1).toString();
+            }
+        }
+        get minimum() {
+            return parseInt(this.numberInput.min);
+        }
+        get number() {
+            return parseInt(this.numberInput.value);
+        }
+        get incrementButtons() {
+            return this.el.querySelectorAll('.js-formatic-stepper__increment');
+        }
+        get decrementButtons() {
+            return this.el.querySelectorAll('.js-formatic-stepper__decrement');
+        }
+        get numberInput() {
+            return this.el.querySelector('.js-formatic-stepper__number');
+        }
+    }
+    Formatic.Stepper = Stepper;
+})(Formatic || (Formatic = {}));
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.js-formatic-stepper').forEach((el) => {
+        console.debug('Instantiating Formatic.Stepper...');
+        new Formatic.Stepper(el);
+    });
+});
+var Formatic;
+(function (Formatic) {
+    class Textarea {
+        constructor(el) {
+            this.el = el;
+            this.setupBindings();
+        }
+        setupBindings() {
+            this.autosize();
+            this.el.addEventListener('input', (event) => {
+                event.preventDefault();
+                if (this.autoSubmit)
+                    this.actionSave();
+            });
+        }
+        actionSave() {
+            this.guiWaitingForSave();
+            this.debounce(this.actionSaveNow.bind(this))();
+        }
+        actionSaveNow() {
+            console.debug("Saving textarea...");
+            this.el.classList.remove('is-loading');
+            this.el.classList.add('is-saved');
+            this.save();
+        }
+        guiWaitingForSave() {
+            this.el.classList.add('is-loading');
+            this.el.classList.remove('is-saved');
+            this.el.classList.remove('is-failed');
+        }
+        guiSaved() {
+            this.el.classList.remove('is-loading');
+            this.el.classList.add('is-saved');
+            this.el.classList.remove('is-failed');
+        }
+        guiFailed() {
+            this.el.classList.remove('is-loading');
+            this.el.classList.remove('is-saved');
+            this.el.classList.add('is-failed');
+        }
+        get autoSubmit() {
+            return this.el.classList.contains('is-autosubmit');
+        }
+        save() {
+            const form = this.el.closest('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');
+            });
+        }
+        debounce(fn) {
+            return () => {
+                clearTimeout(this.timeoutId);
+                this.timeoutId = setTimeout(() => fn(), 1000);
+            };
+        }
+        autosize() {
+            try {
+                autosize(this.el);
+            }
+            catch (error) {
+                console.warn(`Formatic is missing the autosize library`);
+            }
+        }
+    }
+    Formatic.Textarea = Textarea;
+    document.addEventListener('DOMContentLoaded', () => {
+        document.querySelectorAll('.js-formatic-textarea').forEach((el) => {
+            console.debug('Instantiating Formatic.Textarea...');
+            new Formatic.Textarea(el);
+        });
+    });
+})(Formatic || (Formatic = {}));
+var Formatic;
+(function (Formatic) {
+    class Toggle {
+        constructor(el) {
+            this.el = el;
+            this.setupBindings();
+        }
+        setupBindings() {
+            this.checkbox.addEventListener('click', (event) => {
+                event.preventDefault();
+                const box = event.target;
+                box.checked ? this.activate(box) : this.deactivate(box);
+            });
+        }
+        activate(box) {
+            const form = box.closest('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('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');
+            });
+        }
+        deactivate(box) {
+            const form = box.closest('form');
+            const data = new FormData(form);
+            data.set('_method', 'delete');
+            fetch(form.action, { method: 'POST', body: data })
+                .then(response => {
+                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');
+            });
+        }
+        get checkbox() {
+            return this.el.querySelector('input[type="checkbox"]');
+        }
+    }
+    Formatic.Toggle = Toggle;
+})(Formatic || (Formatic = {}));
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.js-formatic-toggle').forEach((el) => {
+        console.debug('Instantiating Formatic::Toggle...');
+        new Formatic.Toggle(el);
+    });
+});
+//# sourceMappingURL=formatic.js.map

data/app/assets/javascript/formatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatic.js","sourceRoot":"","sources":["formatic/components/date.ts","formatic/components/select.ts","formatic/components/stepper.ts","formatic/components/textarea.ts","formatic/components/toggle.ts"],"names":[],"mappings":"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"}

data/app/assets/stylesheets/formatic/components/checklist.sass

@@ -0,0 +1,3 @@
+.c-formatic-checklist
+  display: grid
+  grid-row-gap: 0.4em

data/app/assets/stylesheets/formatic/components/date.sass

@@ -0,0 +1,70 @@
+@use "sass:color"
+@use "iglu/font-size"
+@use "iglu/spacing"
+@use "formatic/settings/colors"
+@use "formatic/tools/terminal"
+
+.c-formatic-date
+
+  &__inputs
+    display: grid
+    grid-auto-flow: column
+    grid-gap: 0.5em
+    +spacing.margin-bottom--small
+
+  &__select
+    .c-formatic-wrapper.is-required &
+      border-left-color: colors.$paradise-pink
+      border-left-width: 2px
+
+  &__calendar
+    display: flex
+    // See https://kevinyank.com/posts/horizontal-scrolling/
+    overflow-x: scroll
+    overflow-y: hidden
+    scrollbar-width: none
+    -ms-overflow-style: none
+    ::-webkit-scrollbar
+      display: none
+
+  &__flick
+    background-color: color.adjust(#000, $lightness: 96%)
+    text-align: center
+    text-decoration: none
+    display: flex
+    flex-direction: column
+    justify-content: center
+    color: colors.$black
+    +spacing.margin-right--smaller
+    +spacing.padding-tiny
+
+  &__clear
+    +font-size.large
+    +spacing.padding-small
+
+  &__calendar-day-number
+    +font-size.default
+    +terminal.terminal
+
+  &__calendar-month
+    text-transform: uppercase
+    +font-size.smaller
+
+  &__calendar-year
+    opacity: 0.4
+    +terminal.terminal
+    +font-size.smaller
+
+  & .is-saturday
+    background-color: color.adjust(#000, $lightness: 70%)
+
+  & .is-sunday
+    background-color: color.adjust(#000, $lightness: 50%)
+    color: colors.$white
+
+  & .is-holiday
+    color: colors.$paradise-pink
+
+  & .is-today
+    border: 3px solid colors.$black
+    font-weight: bold

data/app/assets/stylesheets/formatic/components/select.sass

@@ -0,0 +1,24 @@
+@use "formatic/settings/colors"
+
+.c-formatic-select
+
+  .c-formatic-wrapper.is-required &
+    border-left-color: colors.$paradise-pink
+    border-left-width: 2px
+
+  &.is-loading,
+  &.is-saved,
+  &.is-failed
+    background-repeat: no-repeat
+    background-size: 24px 33px
+
+  &.is-loading
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgba(139, 139, 139, 0.243)\"></path></svg>")
+
+  &.is-saved
+    background-size: 24px 33px
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgb(0, 163, 0)\"></path></svg>")
+
+  &.is-failed
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgb(185, 1, 1)\"></path></svg>")
+    background-color: red

data/app/assets/stylesheets/formatic/components/stepper.sass

@@ -0,0 +1,43 @@
+@use "iglu/font-size"
+@use "iglu/spacing"
+@use "formatic/settings/colors"
+
+.c-formatic-stepper
+  display: grid
+  align-items: stretch
+  justify-content: left
+  grid-auto-flow: column
+
+  &__step
+    display: inline-block
+    border: 1px solid colors.$silver-gray
+    vertical-align: middle
+    padding-right: 1em
+    padding-left: 1em
+    padding-top: 0.5em
+    padding-bottom: 0.5em
+    border-radius: 0.3em
+    color: colors.$black
+    text-decoration: none
+    +font-size.huge
+
+  &__number
+    -webkit-appearance: none
+    -moz-appearance: none
+    font-family: 'Roboto Condensed'
+    width: 7em
+    height: 100%
+    outline-offset: 0
+    color: colors.$black
+    text-align: center
+    vertical-align: middle
+    border: 0
+    +font-size.large
+    +spacing.margin-bottom--small
+
+    .c-input.is-required &
+      border-left-color: colors.$paradise-pink
+      border-left-width: 2px
+
+  ::placeholder
+    color: colors.$silver-gray

data/app/assets/stylesheets/formatic/components/string.sass

@@ -0,0 +1,13 @@
+@use "formatic/settings/colors"
+@use "formatic/tools/terminal"
+
+.c-formatic-string
+
+  &__input
+
+    &.is-terminal
+      +terminal.terminal
+
+    .c-formatic-wrapper.is-required &
+      border-left-color: colors.$paradise-pink
+      border-left-width: 2px

data/app/assets/stylesheets/formatic/components/textarea.sass

@@ -0,0 +1,22 @@
+@use "formatic/settings/colors"
+
+.c-formatic-textarea
+
+  &__input
+    background-position: right 0.5rem bottom 0.5rem
+    background-repeat: no-repeat
+    background-size: 20px 20px
+
+    &.is-loading
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgba(139, 139, 139, 0.243)\"></path></svg>")
+
+    &.is-saved
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgb(0, 163, 0)\"></path></svg>")
+
+    &.is-failed
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1024\" height=\"1024\" viewBox=\"0 0 1024 1024\"><path d=\"M512 213.333c147.328 0 251.349 119.339 237.525 289.28 74.453-1.963 189.141 32.043 189.141 158.72 0 82.347-66.987 149.333-149.333 149.333h-554.667c-82.347 0-149.333-66.987-149.333-149.333 0-119.339 105.771-163.541 189.141-158.72-7.125-179.968 94.208-289.28 237.525-289.28zM512 128c-170.923 0-310.059 134.016-319.104 302.592-109.653 19.755-192.896 115.456-192.896 230.741 0 129.579 105.088 234.667 234.667 234.667h554.667c129.579 0 234.667-105.088 234.667-234.667 0-115.285-83.243-210.987-192.896-230.741-9.045-168.576-148.181-302.592-319.104-302.592zM682.667 554.667h-128v170.667h-85.333v-170.667h-128l170.667-170.667 170.667 170.667z\" style=\"fill: rgb(185, 1, 1)\"></path></svg>")
+      background-color: red
+
+    .c-formatic-wrapper.is-required &
+      border-left-color: colors.$paradise-pink
+      border-left-width: 2px

data/app/assets/stylesheets/formatic/components/toggle.sass

@@ -0,0 +1,93 @@
+@use "iglu/font-size"
+@use "formatic/settings/colors"
+
+.c-formatic-toggle
+  // Having grid in the wrapper and the <label>
+  // makes the caption width 100% (increases the click area)
+  display: grid
+  +font-size.default
+
+  label
+    display: inline-grid
+    // This component may be used as part of the plural `InputTogglesComponent`.
+    // There we may have multi-line captions per toggle. This is to align them.
+    grid-template-columns: max-content 1fr
+    grid-template-areas: 'switch caption' 'status status'
+
+    small
+      opacity: 0.5
+      +font-size.small
+
+  i // Slider
+    grid-area: switch
+    display: inline-block
+    width: 2.8em
+    height: 1.5em
+    border-radius: 1.5em
+    position: relative
+    vertical-align: middle
+    transition: background 0.25s
+    background: colors.$silver-gray
+
+    &:before // Pin
+      display: block
+      position: absolute
+      content: ""
+      top: 0.1em
+      left: 0.1em
+      width: 1.3em
+      height: 1.3em
+      border-radius: 50%
+      background-color: colors.$white
+      transition: left 0.1s
+
+  // Checkbox
+  input
+    position: absolute
+    visibility: hidden
+
+    // Active Slider
+    &:checked + i
+      background-color: colors.$jade-green
+
+      &.is-alert
+        background-color: colors.$paradise-pink
+
+    // Active Pin
+    &:checked + i:before
+      left: 1.4em
+      background-color: colors.$white
+
+    // Active Status
+    &:not(:checked) ~ .is-active
+      display: none
+    &:checked ~ .is-active
+      display: block
+
+    // Inactive Status
+    &:not(:checked) ~ .is-inactive
+      display: block
+    &:checked ~ .is-inactive
+      display: none
+
+  // Caption
+  span
+    grid-area: caption
+    margin-left: 0.5em
+    position: relative
+    top: 2px
+
+  // Status
+  .is-inactive,
+  .is-active
+    grid-area: status
+    margin-top: 0.5em
+    color: colors.$granite-gray
+    +font-size.smaller
+
+  // So that CI has a label with content to find and click on
+  // See https://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FNode%2FActions:choose
+  &__label-caption-dummy
+    position: absolute
+    margin-left: -9999px
+    visibility: hidden