coveragebook_components 0.5.0

data/app/assets/js/helpers/dom.js

@@ -0,0 +1,41 @@
+import { isNumeric } from "@helpers/lang";
+
+function getHiddenElementDimensions(el, display = "block") {
+  let size;
+  if (el.style.display === "none") {
+    el.style.display = display;
+    size = el.getBoundingClientRect();
+    el.style.display = "none";
+  } else {
+    size = el.getBoundingClientRect();
+  }
+
+  return size;
+}
+
+function castAttributeValue(value) {
+  if (value === "false") {
+    return false;
+  }
+
+  if (value === "true") {
+    return true;
+  }
+
+  if (isNumeric(value)) {
+    return parseInt(value, 10);
+  }
+
+  return value;
+}
+
+function isNode(o) {
+  return typeof Node === "object"
+    ? o instanceof Node
+    : o &&
+        typeof o === "object" &&
+        typeof o.nodeType === "number" &&
+        typeof o.nodeName === "string";
+}
+
+export { getHiddenElementDimensions, castAttributeValue, isNode };

data/app/assets/js/helpers/file.js

@@ -0,0 +1,11 @@
+function blobToFile(blob, fileName, type) {
+  return new File([blob], fileName, { type });
+}
+
+function fileToDataURL(file, cb) {
+  const reader = new FileReader();
+  reader.onload = ({ target }) => cb(target.result);
+  reader.readAsDataURL(file);
+}
+
+export { fileToDataURL, blobToFile };

data/app/assets/js/helpers/lang.js

@@ -0,0 +1,46 @@
+function nameFunction(name, body) {
+  return {
+    [name](...args) {
+      return body.apply(this, args);
+    },
+  }[name];
+}
+
+function isObject(thing) {
+  return typeof thing === "object" && thing !== null;
+}
+
+function isNumeric(str) {
+  if (typeof str != "string") return false; // we only process strings!
+  return (
+    !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+    !isNaN(parseFloat(str))
+  ); // ...and ensure strings of whitespace fail
+}
+
+function roughSizeOfObject(object) {
+  const objectList = [];
+  const stack = [object];
+  let bytes = 0;
+
+  while (stack.length) {
+    const value = stack.pop();
+
+    if (typeof value === "boolean") {
+      bytes += 4;
+    } else if (typeof value === "string") {
+      bytes += value.length * 2;
+    } else if (typeof value === "number") {
+      bytes += 8;
+    } else if (typeof value === "object" && objectList.indexOf(value) === -1) {
+      objectList.push(value);
+
+      for (var i in value) {
+        stack.push(value[i]);
+      }
+    }
+  }
+  return bytes;
+}
+
+export { nameFunction, isObject, isNumeric, roughSizeOfObject };

data/app/assets/js/helpers/path.js

@@ -0,0 +1,5 @@
+function stripExtension(filename) {
+  return filename.substring(0, filename.lastIndexOf(".")) || filename;
+}
+
+export { stripExtension };

data/app/assets/js/helpers/screenshot.js

@@ -0,0 +1,26 @@
+import { toBlob } from "html-to-image";
+import { stripExtension } from "./path";
+import { isObject } from "./lang";
+import { blobToFile } from "./file";
+
+function generateScreenshotFilename(name = null, ext = null) {
+  name = [stripExtension(name || "screenshot"), new Date().getTime()].join("-");
+  return ext ? `${name}.${ext}` : name;
+}
+
+// Attempts to convert a DOM element into a static image.
+// Returns a File object.
+async function captureElementScreenshot(el, filename, opts = {}) {
+  if (isObject(filename)) {
+    filename = null;
+    opts = filename;
+  }
+
+  filename = generateScreenshotFilename(filename, "jpg");
+
+  const imageBlob = await toBlob(el, opts);
+
+  return blobToFile(imageBlob, filename, "image/jpg");
+}
+
+export { captureElementScreenshot };

data/app/assets/js/helpers/turbo_events.js

@@ -0,0 +1,13 @@
+function wasSuccessful(event) {
+  return getEventDetail(event).success;
+}
+
+function hasFailed(event) {
+  return !getEventDetail(event).success;
+}
+
+function getEventDetail(obj) {
+  return obj instanceof CustomEvent ? obj.detail : obj;
+}
+
+export { wasSuccessful, hasFailed };

data/app/assets/js/libs/alpine/index.js

@@ -0,0 +1,37 @@
+import Alpine from "alpinejs";
+
+import morph from "@alpinejs/morph";
+import collapse from "@alpinejs/collapse";
+import intersect from "@alpinejs/intersect";
+import mask from "@alpinejs/mask";
+import focus from "@alpinejs/focus";
+import tash from "alpinejs-tash";
+
+import options from "@js/libs/alpine/plugins/options";
+import tooltip from "@js/libs/alpine/plugins/tooltip";
+import dropdown from "@js/libs/alpine/plugins/dropdown";
+import destroy from "@js/libs/alpine/plugins/destroy";
+import dimensions from "@js/libs/alpine/plugins/dimensions";
+import notification from "@js/libs/alpine/plugins/notification";
+
+// Third party plugins
+
+Alpine.plugin(morph);
+Alpine.plugin(mask);
+Alpine.plugin(collapse);
+Alpine.plugin(intersect);
+Alpine.plugin(focus);
+Alpine.plugin(tash);
+
+// Bespoke plugins
+
+Alpine.plugin(options);
+Alpine.plugin(tooltip);
+Alpine.plugin(dropdown);
+Alpine.plugin(destroy);
+Alpine.plugin(dimensions);
+Alpine.plugin(notification);
+
+window.Alpine = Alpine;
+
+export default Alpine;

data/app/assets/js/libs/alpine/plugins/destroy.js

@@ -0,0 +1,9 @@
+export default function (Alpine) {
+  Alpine.directive(
+    "destroy",
+    (el, { expression }, { evaluateLater, cleanup }) => {
+      const clean = evaluateLater(expression);
+      cleanup(() => clean());
+    }
+  );
+}

data/app/assets/js/libs/alpine/plugins/dimensions.js

@@ -0,0 +1,40 @@
+import { setData, getData } from "@helpers/alpine";
+
+export default function (Alpine) {
+  Alpine.directive(
+    "dimensions",
+    (el, { value, modifiers, expression }, { evaluateLater, cleanup }) => {
+      if (value) return;
+
+      const data = getData(el);
+      let target;
+      if (modifiers.includes("parent")) {
+        target = el.parentNode;
+      } else {
+        target = el.querySelector("[x-dimensions\\:target]") || el;
+      }
+
+      const evaluate = evaluateLater(expression);
+      const sizeObserver = new ResizeObserver((entries) => {
+        const dimensions = entries[0].contentRect;
+
+        evaluate(() => {}, {
+          scope: {
+            dimensions: {
+              width: dimensions.width,
+              height: dimensions.height,
+              x: dimensions.x,
+              y: dimensions.y,
+            },
+          },
+        });
+      });
+
+      sizeObserver.observe(target);
+
+      cleanup(() => {
+        sizeObserver && sizeObserver.disconnect();
+      });
+    }
+  );
+}

data/app/assets/js/libs/alpine/plugins/dropdown.js

@@ -0,0 +1,88 @@
+import tippy from "@libs/tippy";
+import buildConfig from "../utils/tippy_modifiers";
+import { isObject } from "@helpers/lang";
+import { isNode } from "@helpers/dom";
+import { setData, getData } from "@helpers/alpine";
+
+export default function (Alpine) {
+  Alpine.directive(
+    "dropdown",
+    (el, { value, modifiers, expression }, { evaluate, effect }) => {
+      // Don't run for dropdown sub-elements
+      // like `x-dropdown:trigger` and `x-dropdown:content`
+      if (value) return;
+
+      const data = getData(el);
+      const settings = buildConfig(modifiers);
+      const result = expression ? evaluate(expression) : {};
+      const directiveConfig = isObject(result) ? result : {};
+      let { triggerTarget, contentTarget, ...config } = directiveConfig;
+
+      contentTarget =
+        contentTarget || el.querySelector("[x-dropdown\\:content]");
+      content = isNode(contentTarget)
+        ? contentTarget.firstElementChild
+        : contentTarget;
+      triggerTarget =
+        triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
+
+      // Initialize the dropdown
+
+      if (!el.__x_dropdown) {
+        // Mix in some helper methods under the `.dropdown`
+        // property for managing the dropdown.
+
+        const mixin = Alpine.reactive({
+          dropdown: {
+            open: false,
+            trigger: triggerTarget,
+            content: contentTarget,
+
+            hide() {
+              el.__x_dropdown.hide();
+            },
+
+            show() {
+              el.__x_dropdown.show();
+            },
+          },
+        });
+
+        setData(el, mixin);
+
+        const dropdown = (el.__x_dropdown = tippy(el, {
+          theme: "coco-app-dropdown",
+          placement: "bottom-start",
+          offset: [0, 0],
+          trigger: "click",
+          interactive: true,
+          animation: false,
+
+          triggerTarget,
+          content,
+
+          onShow: (...args) => {
+            mixin.dropdown.open = true;
+            data.$dispatch("dropdown:show", { dropdown: el.__x_dropdown });
+          },
+
+          onHide: (...args) => {
+            mixin.dropdown.open = false;
+            data.$dispatch("dropdown:hide", { dropdown: el.__x_dropdown });
+          },
+
+          onMount() {
+            data.$dispatch("dropdown:mount", { dropdown: el.__x_dropdown });
+          },
+
+          onCreate() {
+            data.$dispatch("dropdown:create", { dropdown: el.__x_dropdown });
+          },
+
+          ...settings,
+          ...config,
+        }));
+      }
+    }
+  ).before("bind");
+}

data/app/assets/js/libs/alpine/plugins/notification.js

@@ -0,0 +1,98 @@
+import { getData, setData } from "@helpers/alpine";
+
+export default function (Alpine) {
+  let notificationId = 0;
+  let queuePosition = 0;
+
+  Alpine.directive("notification", (el, { expression }, { evaluate }) => {
+    notificationId++;
+
+    const data = getData(el);
+    const type = evaluate(expression);
+    const options = evaluate("$options");
+
+    const notification = Alpine.reactive({
+      id: notificationId,
+      type,
+
+      autoShow: options.show,
+      showDelay: options.showDelay,
+      shown: false,
+
+      autoDismiss: options.dismiss,
+      dismissDelay: options.dismissDelay,
+      dismissed: false,
+      dismissTimer: null,
+
+      position: options.position,
+      queuePosition: 0,
+
+      init() {
+        data.$dispatch(`${type}:init`, {
+          id: notification.id,
+          type: notification.type,
+          [type]: notification,
+        });
+
+        if (notification.autoShow) {
+          setTimeout(() => notification.show(), notification.showDelay);
+        }
+      },
+
+      show() {
+        if (!notification.shown) {
+          notification.queuePosition = queuePosition++;
+
+          notification.startAutoDismiss();
+          notification.shown = true;
+
+          data.$dispatch(`${type}:show`, {
+            id: notification.id,
+            queuePosition: notification.queuePosition,
+            type: notification.type,
+            [type]: notification,
+          });
+        }
+      },
+
+      dismiss() {
+        notification.dismissed = true;
+        notification.clearAutoDismiss();
+
+        data.$dispatch(`${type}:dismiss`, {
+          id: notification.id,
+          [type]: notification,
+        });
+        setTimeout(() => el.remove(), 500);
+      },
+
+      startAutoDismiss() {
+        if (notification.autoDismiss === true) {
+          notification.dismissTimer = setTimeout(
+            () => notification.dismiss(),
+            notification.dismissDelay
+          );
+        }
+      },
+
+      clearAutoDismiss() {
+        clearTimeout(notification.dismissTimer);
+      },
+
+      clearFromQueue(event) {
+        if (
+          notification.type === event.detail.type &&
+          notification.position === "fixed" &&
+          notification.id !== event.detail.id &&
+          notification.queuePosition < event.detail.queuePosition
+        ) {
+          notification.dismiss();
+        }
+      },
+    });
+
+    setData(el, { notification });
+
+    evaluate("notification.init");
+  }).before("init");
+}

data/app/assets/js/libs/alpine/plugins/options.js

@@ -0,0 +1,95 @@
+import bind from "alpinejs/src/utils/bind";
+import { kebabCase, camelCase, mapValues, keyBy } from "lodash";
+import { castAttributeValue } from "@helpers/dom";
+import { setData } from "@helpers/alpine";
+
+export default function (Alpine) {
+  Alpine.directive(
+    "options",
+    (el, { expression }, { evaluate, effect, cleanup }) => {
+      // Extract the names of options to bind to from the directive
+      // expression: `x-options="['option-name', 'another-option']"`
+      const optionNames = evaluate(expression);
+
+      const optionsData = buildOptionsData(el, optionNames);
+      const optionAttrs = optionsData.map((option) => option.attr);
+
+      // Add `.$options` property to provide the component
+      // with access to the (live, reactive) options values.
+
+      const data = setData(
+        el,
+        Alpine.reactive({
+          $options: toPairs(optionsData),
+        })
+      );
+
+      // Ensure data-attribute values are kept in sync with `$options`
+      // property values:
+
+      effect(() => {
+        Object.entries(data.$options).forEach(([key, value]) => {
+          Alpine.mutateDom(() => {
+            const attrName = `data-${kebabCase(key)}`;
+            if (value === null) {
+              el.removeAttribute(attrName);
+            } else {
+              el.setAttribute(attrName, value);
+            }
+          });
+        });
+      });
+
+      // Create an attribute observer to watch for external changes to
+      // component attributes and to update the options data object accordingly.
+
+      const attrObserver = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+          const attrName = mutation.attributeName;
+
+          if (
+            mutation.type !== "attributes" ||
+            !optionAttrs.includes(attrName)
+          ) {
+            return;
+          }
+
+          const value = mutation.target.getAttribute(attrName);
+          const option = camelCase(attrName.replace("data-", ""));
+
+          data.$options[option] = castAttributeValue(value);
+        }
+      }).observe(el, { attributes: true });
+
+      // Cleanup when we are done...
+
+      cleanup(() => {
+        attrObserver && attrObserver.disconnect();
+      });
+    }
+  ).before("bind");
+}
+
+// Build an array of objects with normalized
+// attribute names, component keys and the initial value
+// of the option (if the data-attribute is present).
+function buildOptionsData(el, optionNames) {
+  return optionNames.map((name) => {
+    const key = camelCase(name);
+    const attr = `data-${kebabCase(name)}`;
+
+    // Values are crudely type-cast into booleans, integers
+    // and strings. Good enough to cover the majority of use cases.
+    let value = null;
+    if (el.hasAttribute(attr)) {
+      const strValue = el.getAttribute(attr);
+      value = castAttributeValue(strValue);
+    }
+
+    return { name, key, attr, value };
+  });
+}
+
+function toPairs(optionsData) {
+  return mapValues(keyBy(optionsData, "key"), "value");
+}

data/app/assets/js/libs/alpine/plugins/tooltip.js

@@ -0,0 +1,74 @@
+import tippy from "@libs/tippy";
+import buildConfig from "../utils/tippy_modifiers";
+import { setData } from "@helpers/alpine";
+
+export default function (Alpine) {
+  Alpine.directive(
+    "tooltip",
+    (el, { modifiers, expression }, { evaluate, evaluateLater, effect }) => {
+      const config = buildConfig(modifiers);
+
+      if (!el.__x_tippy) {
+        el.__x_tippy = tippy(el, {
+          theme: "coco-tooltip",
+          ...config,
+        });
+      }
+
+      let initialContent = null;
+
+      const enableTooltip = () => el.__x_tippy.enable();
+      const disableTooltip = () => el.__x_tippy.disable();
+      const setupTooltip = (content) => {
+        if (!content) {
+          disableTooltip();
+        } else {
+          enableTooltip();
+
+          el.__x_tippy.setContent(content);
+          initialContent = initialContent || content;
+        }
+      };
+
+      // Evaluate initital content immediately if
+      // marked as raw, otherwise defer evaluation
+
+      if (modifiers.includes("raw")) {
+        setupTooltip(expression);
+      } else {
+        const getContent = evaluateLater(expression);
+
+        effect(() => {
+          getContent((content) => {
+            if (typeof content === "object" && content !== null) {
+              el.__x_tippy.setProps(content);
+              initialContent = initialContent || content.content;
+              enableTooltip();
+            } else {
+              setupTooltip(content);
+            }
+          });
+        });
+      }
+
+      // Add some helper methods under the `.tooltip`
+      // property for getting/setting tooltip content
+
+      setData(el, {
+        tooltip: {
+          setContent(content) {
+            setupTooltip(content);
+          },
+
+          disable: () => disableTooltip(),
+
+          enable: () => enableTooltip(),
+
+          reset() {
+            if (initialContent) setupTooltip(initialContent);
+          },
+        },
+      });
+    }
+  ).before("bind");
+}

data/app/assets/js/libs/alpine/utils/tippy_modifiers.js

@@ -0,0 +1,39 @@
+import { followCursor } from "@assets/js/libs/tippy";
+
+export default function tippyModifiers(modifiers) {
+  if (modifiers.length === 0) return {};
+
+  const config = {
+    plugins: [],
+  };
+
+  const getModifierArgument = (modifier) => {
+    return modifiers[modifiers.indexOf(modifier) + 1];
+  };
+
+  if (modifiers.includes("duration")) {
+    config.duration = parseInt(getModifierArgument("duration"));
+  }
+
+  if (modifiers.includes("delay")) {
+    const delay = getModifierArgument("delay");
+
+    config.delay = delay.includes("-")
+      ? delay.split("-").map((n) => parseInt(n))
+      : parseInt(delay);
+  }
+
+  if (modifiers.includes("debounce") && config.interactive) {
+    config.interactiveDebounce = parseInt(getModifierArgument("debounce"));
+  }
+
+  if (modifiers.includes("theme")) {
+    config.theme = getModifierArgument("theme");
+  }
+
+  if (modifiers.includes("placement")) {
+    config.placement = getModifierArgument("placement");
+  }
+
+  return config;
+}

data/app/assets/js/libs/tippy/index.js

@@ -0,0 +1,12 @@
+import tippy, { createSingleton, followCursor, roundArrow } from "tippy.js";
+import hideOnEsc from "./plugins/hide_on_esc";
+
+tippy.setDefaultProps({
+  theme: null,
+  allowHTML: true,
+  arrow: roundArrow + roundArrow,
+  plugins: [hideOnEsc, followCursor],
+});
+
+export default tippy;
+export { tippy, createSingleton, hideOnEsc, followCursor };

data/app/assets/js/libs/tippy/plugins/hide_on_esc.js

@@ -0,0 +1,23 @@
+export default hideOnEsc = {
+  name: "hideOnEsc",
+
+  defaultValue: true,
+
+  fn({ hide }) {
+    function onKeyDown(event) {
+      if (event.keyCode === 27) {
+        hide();
+      }
+    }
+
+    return {
+      onShow() {
+        document.addEventListener("keydown", onKeyDown);
+      },
+
+      onHide() {
+        document.removeEventListener("keydown", onKeyDown);
+      },
+    };
+  },
+};

data/app/components/coco/app/blocks/banner/banner.css

@@ -0,0 +1,5 @@
+@layer components {
+  [data-coco][data-component="app-banner"] {
+    @apply px-app py-2 text-center;
+  }
+}

data/app/components/coco/app/blocks/banner/banner.rb

@@ -0,0 +1,8 @@
+module Coco
+  module App
+    module Blocks
+      class Banner < Coco::Component
+      end
+    end
+  end
+end