coveragebook_components 0.14.0 → 0.15.0

data/app/assets/css/base/config.css

@@ -1 +1 @@
-@config "../../../../config/tailwind.config.cjs";
+@config "../../../../config/tailwind.config.js";

data/app/assets/js/app.js

@@ -1,30 +1,11 @@
-import { registerComponents } from "@helpers/alpine";
-import { navigateTo } from "@helpers/location";
-import { Alpine } from "./base/setup";
+import "./base/polyfills";
+import Coco from "./coco/coco";
+import baseComponents from "./base/components";
+import bookComponents from "@bookComponents/**/*.js";
+import appComponents from "@appComponents/**/*.js";
 
-import components from "@components/**/*.js";
-registerComponents(components);
+Coco.registerComponents(baseComponents);
+Coco.registerComponents(bookComponents);
+Coco.registerComponents(appComponents);
 
-// Global JS navigation handler.
-// Optionally uses Turbo for the page navigation.
-window.addEventListener("app:navigate", (event) => {
-  const url = event.detail.url;
-  if (url) {
-    delete event.detail.url;
-    navigateTo(url, event.detail);
-  }
-});
-
-// Uodate 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)
-function setAppHeightProperty() {
-  document.documentElement.style.setProperty(
-    "--app-height",
-    `${window.innerHeight}px`
-  );
-}
-window.addEventListener("resize", setAppHeightProperty);
-setAppHeightProperty();
-
-Alpine.start();
+export default Coco;

data/app/assets/js/base/alpine/directives/options.js

@@ -1,4 +1,4 @@
-import { kebabCase, camelCase, mapValues, keyBy } from "lodash";
+import { kebabCase, camelCase, mapValues, keyBy } from "@helpers/lang";
 import { castAttributeValue } from "@helpers/dom";
 import { setData } from "@helpers/alpine";
 

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

@@ -1,8 +1,6 @@
 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";
 
@@ -21,8 +19,6 @@ window.Alpine = Alpine;
 Alpine.plugin(mask);
 Alpine.plugin(focus);
 Alpine.plugin(morph);
-Alpine.plugin(collapse);
-Alpine.plugin(intersect);
 
 // Coco directives
 

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.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_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.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.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.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_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/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/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/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.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.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/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 {

data/app/helpers/coco/integration_helper.rb

@@ -1,19 +1,11 @@
 module Coco
   module IntegrationHelper
-    def coco_javascript_tag(context, dev: ENV["COCO_PATH"], **)
-      javascript_include_tag("coco/#{context}#{".dev" if dev}", **)
-    end
-
-    def coco_javascript_file_path(context, dev: ENV["COCO_PATH"])
-      File.join(Coco::Engine.root, "app/assets/build/coco/#{context}#{".dev" if dev}.js")
-    end
-
     def coco_stylesheet_tag(context, dev: ENV["COCO_PATH"], **)
-      stylesheet_link_tag("coco/#{context}#{".dev" if dev}", **)
+      stylesheet_link_tag("coco#{"/dev" if dev}/#{context}", **)
     end
 
     def coco_stylesheet_file_path(context, dev: ENV["COCO_PATH"], **opts)
-      File.join(Coco::Engine.root, "app/assets/build/coco/#{context}#{".dev" if dev}.css")
+      File.join(Coco::Engine.root, "app/assets/build/coco#{"/dev" if dev}/#{context}.css")
     end
   end
 end

data/config/{tailwind.config.cjs → tailwind.config.js}

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 
 const defaultTheme = require("tailwindcss/defaultTheme");
-const { cocoPath } = require("./utils.cjs");
-const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs");
+const { cocoPath } = require("./utils.js");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
 
 module.exports = {
   content: [

data/config/{tokens.cjs → tokens.js}

@@ -1,10 +1,8 @@
-const tailwindColors = require("tailwindcss/colors");
-
 const colors = {
   transparent: "transparent",
   current: "currentColor",
-  black: tailwindColors.black,
-  white: tailwindColors.white,
+  black: "#000000",
+  white: "#FFFFFF",
   gray: {
     50: "#F9FAFB",
     100: "#F3F4F6",
@@ -70,7 +68,18 @@ const colors = {
     800: "#075985",
     900: "#0C4A6E",
   },
-  teal: tailwindColors.teal,
+  teal: {
+    50: "#F0FDFA",
+    100: "#CCFBF1",
+    200: "#99F6E4",
+    300: "#5EEAD4",
+    400: "#2DD4BF",
+    500: "#14B8A6",
+    600: "#0D9488",
+    700: "#0F766E",
+    800: "#115E59",
+    900: "#134E4A",
+  },
 };
 
 const colorAliases = {

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.14.0"
+  VERSION = "0.15.0"
 end

data/lib/scripts/{postcss-import-alias-glob.cjs → postcss-import-alias-glob.js}

@@ -3,7 +3,7 @@ const valueParser = require("postcss-value-parser");
 const path = require("path");
 const fg = require("fast-glob");
 const { sort } = require("fast-sort");
-const { cocoPath } = require("../../config/utils.cjs");
+const { cocoPath } = require("../../config/utils.js");
 
 const SORTERS = ["asc", "desc"];
 const DEFAULT_SORTER = "asc";