coveragebook_components 0.14.0 → 0.16.0

data/app/assets/js/base/components.js

@@ -0,0 +1,42 @@
+import buttons from "@components/buttons/**/*.js";
+import embeds from "@components/embeds/**/*.js";
+import fields from "@components/fields/**/*.js";
+import images from "@components/images/**/*.js";
+import indicators from "@components/indicators/**/*.js";
+import layout from "@components/layout/**/*.js";
+import messaging from "@components/messaging/**/*.js";
+import modals from "@components/modals/**/*.js";
+import navigation from "@components/navigation/**/*.js";
+import pickers from "@components/pickers/**/*.js";
+import typography from "@components/typography/**/*.js";
+import utilities from "@components/utilities/**/*.js";
+
+export {
+  buttons,
+  embeds,
+  fields,
+  images,
+  indicators,
+  layout,
+  messaging,
+  modals,
+  navigation,
+  pickers,
+  typography,
+  utilities,
+};
+
+export default [
+  ...buttons,
+  ...embeds,
+  ...fields,
+  ...images,
+  ...indicators,
+  ...layout,
+  ...messaging,
+  ...modals,
+  ...navigation,
+  ...pickers,
+  ...typography,
+  ...utilities,
+];

data/app/assets/js/base/polyfills.js

@@ -0,0 +1 @@
+import "container-query-polyfill";

data/app/assets/js/book.js

@@ -1,8 +1,9 @@
-import { registerComponents } from "@helpers/alpine";
-import { Alpine } from "./base/setup";
+import "./base/polyfills";
+import Coco from "./coco/coco";
+import baseComponents from "./base/components";
+import bookComponents from "@bookComponents/**/*.js";
 
-import components from "@components/!(app)/**/*.js";
+Coco.registerComponents(baseComponents);
+Coco.registerComponents(bookComponents);
 
-registerComponents(components);
-
-Alpine.start();
+export default Coco;

data/app/assets/js/coco/coco.js

@@ -0,0 +1,39 @@
+import Alpine from "../base/alpine";
+import packageJSON from "@/package.json" assert { type: "json" };
+import { registerComponents } from "@helpers/alpine.js";
+import CocoComponent from "./component";
+import * as helpers from "@helpers/index";
+
+const Coco = {
+  version: packageJSON.version,
+
+  start() {
+    if (this._started) {
+      throw new Error("Coco has already been started!");
+    }
+
+    console.info("Initializing Coco JS", packageJSON.version);
+
+    registerComponents(this._components);
+
+    window.Alpine = Alpine;
+    Alpine.start();
+  },
+
+  registerComponents(components) {
+    this._components.push(...components);
+  },
+
+  component(...args) {
+    return CocoComponent(...args);
+  },
+
+  _components: [],
+
+  _started: false,
+};
+
+Coco.Component = CocoComponent;
+Coco.helpers = helpers;
+
+export default Coco;

data/app/assets/js/{base/coco.js → coco/component.js}

@@ -22,4 +22,5 @@ function CocoComponent(name, fn) {
   return func;
 }
 
+export default CocoComponent;
 export { CocoComponent };

data/app/assets/js/coco.js

@@ -0,0 +1,7 @@
+import "./base/polyfills";
+import Coco from "./coco/coco";
+import components from "./base/components";
+
+Coco.registerComponents(components);
+
+export default Coco;

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

@@ -1,18 +1,5 @@
 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;
@@ -38,4 +25,4 @@ function isNode(o) {
         typeof o.nodeName === "string";
 }
 
-export { getHiddenElementDimensions, castAttributeValue, isNode };
+export { castAttributeValue, isNode };

data/app/assets/js/helpers/index.js

@@ -0,0 +1,7 @@
+import * as color from "./color";
+import * as dom from "./dom";
+import * as lang from "./lang";
+import * as location from "./location";
+import * as turboEvents from "./turbo_events";
+
+export { color, dom, lang, location, turboEvents };

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

@@ -1,3 +1,8 @@
+import camelCase from "lodash.camelcase";
+import kebabCase from "lodash.kebabcase";
+import mapValues from "lodash.mapvalues";
+import keyBy from "lodash.keyby";
+
 function nameFunction(name, body) {
   return {
     [name](...args) {
@@ -43,4 +48,13 @@ function roughSizeOfObject(object) {
   return bytes;
 }
 
-export { nameFunction, isObject, isNumeric, roughSizeOfObject };
+export {
+  nameFunction,
+  isObject,
+  isNumeric,
+  roughSizeOfObject,
+  camelCase,
+  kebabCase,
+  keyBy,
+  mapValues,
+};

data/app/components/coco/app/application_layout/application_layout.html.erb

@@ -1,7 +1,9 @@
 <%= render component_tag(
   x: {
     data: x_data("appLayout", banner: banner? && banner_content?),
-    ":class": "{'with-banner': banner}"
+    ":class": "{'with-banner': banner}",
+    "@app:navigate.window": "handleNavigation",
+    "@resize.window": "setAppHeight"
   },
   class: {
     "with-sidebar-nav": sidebar_nav?,

data/app/components/coco/app/application_layout/application_layout.js

@@ -1,4 +1,5 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
+import { navigateTo } from "@helpers/location";
 
 export default CocoComponent("appLayout", (opts) => {
   return {
@@ -6,6 +7,25 @@ export default CocoComponent("appLayout", (opts) => {
 
     init() {
       this.banner = opts.banner;
+      this.setAppHeight();
+    },
+
+    handleNavigation(event) {
+      const url = event.detail.url;
+      if (url) {
+        delete event.detail.url;
+        navigateTo(url, event.detail);
+      }
+    },
+
+    // Update the value of the `--app-height` css variable
+    // when the viewport size changes. To help work around the
+    // issues when using 100vh on mobile safari (https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8)
+    setAppHeight() {
+      document.documentElement.style.setProperty(
+        "--app-height",
+        `${window.innerHeight}px`
+      );
     },
 
     hideBanner() {

data/app/components/coco/app/header/header.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("appHeader", () => {
   return {

data/app/components/coco/app/nav_drawer/nav_drawer.css

@@ -31,11 +31,11 @@
     }
 
     .nav-drawer-heading {
-      @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-gray-300 pb-3;
+      @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-coco-gray-300 pb-3;
     }
 
     .nav-drawer-divider {
-      @apply h-0 border-t border-gray-300 my-3;
+      @apply h-0 border-t border-coco-gray-300 my-3;
     }
 
     [data-component="notice"] {

data/app/components/coco/app/nav_drawer/nav_drawer.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("appNavDrawer", () => {
   return {

data/app/components/coco/app/plan_card/plan_card.css

@@ -36,7 +36,7 @@
     }
 
     .plan-benefits {
-      @apply space-y-4 py-5 border-t border-gray-300;
+      @apply space-y-4 py-5 border-t border-coco-gray-300;
     }
 
     .plan-benefit {

data/app/components/coco/app/plan_picker/plan_picker.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("appPlanPicker", () => {
   return {

data/app/components/coco/app/sidebar_nav/item/item.js

@@ -1,5 +1,5 @@
 import tippy from "@assets/js/base/tippy";
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("appSidebarNavItem", () => {
   return {

data/app/components/coco/app/sidebar_nav/menu/menu.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { navigateTo } from "@helpers/location";
 
 export default CocoComponent("appSidebarNavMenu", () => {

data/app/components/coco/app/sidebar_nav/navbar/navbar.js

@@ -1,5 +1,5 @@
-import tokens from "@config/tokens.cjs";
-import { CocoComponent } from "@assets/js/base/coco";
+import tokens from "@config/tokens.js";
+import { CocoComponent } from "@assets/js/coco/component";
 
 const mobileMaxWidth = parseInt(tokens.screens.sm, 10);
 

data/app/components/coco/app/slide_editor/slide_editor.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 import { captureElementScreenshot } from "@helpers/screenshot";
 import { isDark } from "@helpers/color";

data/app/components/coco/buttons/button/button.css

@@ -154,10 +154,10 @@
     }
 
     &[data-theme="toolbar-floating"] {
-      @apply bg-white hover:bg-gray-100 active:bg-gray-200 border-gray-300;
+      @apply bg-white hover:bg-coco-gray-100 active:bg-coco-gray-200 border-coco-gray-300;
 
       &[data-state="active"] {
-        @apply bg-gray-200;
+        @apply bg-coco-gray-200;
       }
     }
 
@@ -303,18 +303,18 @@
     }
 
     &[data-theme="neutral-dark"] {
-      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600 antialiased;
+      @apply bg-background-dark-1 text-content-light-1 hover:bg-coco-gray-700 active:bg-coco-gray-600 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-dark-1;
       }
 
       &[data-state="active"] {
-        @apply bg-gray-600;
+        @apply bg-coco-gray-600;
       }
 
       &[data-disabled="true"] {
-        @apply bg-gray-300;
+        @apply bg-coco-gray-300;
       }
     }
 

data/app/components/coco/buttons/button/button.js

@@ -1,5 +1,5 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
-import { camelCase } from "lodash";
+import { CocoComponent } from "@assets/js/coco/component.js";
+import { camelCase } from "@helpers/lang";
 
 export default CocoComponent("button", (data = {}) => {
   return {

data/app/components/coco/buttons/button/button_dropdown.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
+import { CocoComponent } from "@assets/js/coco/component.js";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("buttonDropdown", () => {

data/app/components/coco/buttons/button_group/button_group.css

@@ -17,7 +17,7 @@
     }
 
     .divider {
-      @apply w-0 border-l border-gray-300 self-stretch;
+      @apply w-0 border-l border-coco-gray-300 self-stretch;
     }
 
     &[data-align="end"] {

data/app/components/coco/buttons/button_group/button_group.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
+import { CocoComponent } from "@assets/js/coco/component.js";
 import { getComponent } from "@helpers/alpine";
 import { createSingleton } from "@assets/js/base/tippy";
 

data/app/components/coco/buttons/color_picker_button/color_picker_button.css

@@ -7,7 +7,7 @@
     }
 
     .picker-button-color {
-      @apply w-full h-full block rounded-full bg-white border border-gray-900;
+      @apply w-full h-full block rounded-full bg-white border border-coco-gray-900;
     }
 
     [data-component="color-picker"] {

data/app/components/coco/buttons/color_picker_button/color_picker_button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 
 export default CocoComponent("colorPickerButton", ({ selected }) => {

data/app/components/coco/buttons/confirm_panel/confirm_panel.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
+import { CocoComponent } from "@assets/js/coco/component.js";
 
 export default CocoComponent("confirmPanel", () => {
   return {

data/app/components/coco/buttons/image_picker_button/image_picker_button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 

data/app/components/coco/buttons/layout_picker_button/layout_picker_button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getData } from "@helpers/alpine";
 
 export default CocoComponent("layoutPickerButton", ({ selected }) => {

data/app/components/coco/buttons/menu/menu.css

@@ -65,7 +65,7 @@
     }
 
     .divider {
-      @apply h-0 border-t border-gray-300;
+      @apply h-0 border-t border-coco-gray-300;
     }
   }
 }

data/app/components/coco/buttons/menu_button/menu_button.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("menuButton", () => {

data/app/components/coco/buttons/menu_items/user_profile/user_profile.css

@@ -16,7 +16,7 @@
     }
 
     .user-profile-email {
-      @apply text-gray-500 label-sm italic truncate;
+      @apply text-coco-gray-500 label-sm italic truncate;
     }
   }
 }

data/app/components/coco/buttons/toolbar/toolbar.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("appToolbar", () => {

data/app/components/coco/images/icon/icon.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco.js";
+import { CocoComponent } from "@assets/js/coco/component.js";
 
 export default CocoComponent("icon", () => {
   return {

data/app/components/coco/images/image_uploader/image_uploader.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("imageUploader", ({ click, drop }) => {
   return {

data/app/components/coco/indicators/badge/badge.css

@@ -24,7 +24,7 @@
     }
 
     &[data-theme="neutral-muted"] {
-      @apply bg-gray-300 text-content-dark-3;
+      @apply bg-coco-gray-300 text-content-dark-3;
     }
 
     &[data-theme="primary"] {

data/app/components/coco/layout/page/page.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("pageLayout", () => {
   return {};

data/app/components/coco/layout/panel/panel.css

@@ -8,7 +8,7 @@
 
     /* Only style Coco panels that are not rendered inside legacy panel components */
     &:not([data-component="panel"] [data-component="panel"]) {
-      @apply block bg-content-light-1 border border-gray-300 shadow-md rounded-xl;
+      @apply block bg-content-light-1 border border-coco-gray-300 shadow-md rounded-xl;
 
       .panel-content {
         @apply block;

data/app/components/coco/messaging/alert/alert.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("alertMessage", () => {
   return {

data/app/components/coco/messaging/notice/notice.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("notice", () => {
   return {};

data/app/components/coco/messaging/snackbar/snackbar.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("snackbar", () => {
   return {

data/app/components/coco/messaging/system_banner/system_banner.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import Cookies from "js-cookie";
 
 export default CocoComponent("systemBanner", (opts = {}) => {

data/app/components/coco/messaging/toast/toast.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("toast", () => {
   return {

data/app/components/coco/modals/modal/modal.css

@@ -82,7 +82,7 @@
     @apply max-w-2xl mx-auto;
 
     [data-component="modal-dialog"] {
-      @apply border border-gray-300 shadow-md rounded-xl;
+      @apply border border-coco-gray-300 shadow-md rounded-xl;
     }
   }
 }

data/app/components/coco/modals/modal/modal.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { hideAll } from "@assets/js/base/tippy";
 import { navigateTo } from "@helpers/location";
 

data/app/components/coco/modals/modal_dialog/modal_dialog.css

@@ -9,7 +9,7 @@
 
     .modal-dialog-header {
       @apply relative flex items-center;
-      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-coco-gray-300 rounded-t-xl bg-white;
     }
 
     .modal-dialog-title {

data/app/components/coco/modals/modal_dialog/modal_dialog.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("modalDialog", () => {
   return {

data/app/components/coco/modals/modal_lightbox/modal_lightbox.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("modalLightbox", () => {
   return {

data/app/components/coco/pickers/color_picker/color_picker.js

@@ -1,5 +1,5 @@
 import iro from "@jaames/iro";
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { isValidHex, formatHex } from "@helpers/color";
 import { getComponent } from "@helpers/alpine";
 

data/app/components/coco/pickers/image_picker/image_picker.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 import { getComponent } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 

data/app/components/coco/utilities/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("dropdown", () => {
   return {};

data/app/components/coco/utilities/placeholder/placeholder.css

@@ -3,7 +3,7 @@
     @apply p-4;
 
     &[data-boxed="true"] {
-      @apply border border-dashed border-gray-400 bg-gray-50;
+      @apply border border-dashed border-coco-gray-400 bg-coco-gray-50;
     }
 
     &[data-prose="true"] {

data/app/components/coco/utilities/poll_controller/poll_controller.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("pollController", () => {
   return {

data/app/components/coco/utilities/seamless_textarea/seamless_textarea.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/base/coco";
+import { CocoComponent } from "@assets/js/coco/component";
 
 export default CocoComponent("seamlessTextarea", () => {
   return {