coveragebook_components 0.14.0 → 0.16.0

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

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

data/app/assets/css/base/setup.css

@@ -4,9 +4,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "./utils/layout";
-@import "./utils/colors";
-@import "./utils/icons";
 @import "./utils/text";
 @import "./tippy";
 
@@ -19,14 +16,6 @@
     @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
   }
 
-  html.app-layout,
-  html.app-layout body {
-    width: 100vw;
-    height: 100vh;
-    height: var(—-app-height);
-    overflow: hidden;
-  }
-
   a {
     @apply text-current underline underline-offset-2;
   }

data/app/assets/css/base/tippy.css

@@ -2,63 +2,60 @@
 @import "tippy.js/dist/svg-arrow";
 @import "tippy.js/dist/border.css";
 
-/* Tippy  */
-@layer components {
-  [data-tippy-root] {
-    @apply !z-[10010];
+@layer utilities {
+  .tippy-dropdown-box {
+    @apply bg-background-light-2 text-coco-gray-900 label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
   }
+}
 
-  .tippy-box[data-theme^="coco-"] {
-    @apply bg-transparent text-gray-900 label-md whitespace-normal;
-
-    .tippy-content {
-      @apply p-0;
-    }
+[data-tippy-root] {
+  @apply !z-[10010];
+}
 
-    /* arrow border */
-    .tippy-svg-arrow > svg:first-child {
-      @apply fill-transparent;
-    }
+.tippy-box[data-theme^="coco-"] {
+  @apply bg-transparent text-coco-gray-900 label-md whitespace-normal;
 
-    /* arrow background */
-    .tippy-svg-arrow > svg:last-child {
-      @apply fill-transparent;
-    }
+  .tippy-content {
+    @apply p-0;
   }
 
-  /* Tooltip theme */
-  .tippy-box[data-theme~="coco-tooltip"] {
-    @apply bg-background-dark-2 text-white label-sm rounded-lg shadow-xl;
+  /* arrow border */
+  .tippy-svg-arrow > svg:first-child {
+    @apply fill-transparent;
+  }
 
-    .tippy-content {
-      @apply px-3 py-2 truncate max-w-[240px];
-    }
+  /* arrow background */
+  .tippy-svg-arrow > svg:last-child {
+    @apply fill-transparent;
+  }
+}
 
-    /* arrow background */
-    .tippy-svg-arrow > svg:first-child {
-      @apply hidden;
-    }
+/* Tooltip theme */
+.tippy-box[data-theme~="coco-tooltip"] {
+  @apply bg-background-dark-2 text-white label-sm rounded-lg shadow-xl;
 
-    .tippy-svg-arrow > svg:last-child {
-      @apply fill-gray-900;
-    }
+  .tippy-content {
+    @apply px-3 py-2 truncate max-w-[240px];
   }
 
-  /*
-   * Tippy dropdown theme
-   */
-  .tippy-box[data-theme~="coco-app-dropdown"],
-  .tippy-box[data-theme~="coco-menu"] {
-    @apply tippy-dropdown-box;
+  /* arrow background */
+  .tippy-svg-arrow > svg:first-child {
+    @apply hidden;
   }
 
-  .tippy-box[data-theme~="coco-naked-dropdown"] {
-    width: min-content;
+  .tippy-svg-arrow > svg:last-child {
+    @apply fill-coco-gray-900;
   }
 }
 
-@layer utilities {
-  .tippy-dropdown-box {
-    @apply bg-background-light-2 text-gray-900 label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
-  }
+/*
+  * Tippy dropdown theme
+  */
+.tippy-box[data-theme~="coco-app-dropdown"],
+.tippy-box[data-theme~="coco-menu"] {
+  @apply tippy-dropdown-box;
+}
+
+.tippy-box[data-theme~="coco-naked-dropdown"] {
+  width: min-content;
 }

data/app/assets/css/base/utils/text.css

@@ -1,213 +1,3 @@
-/*
- * Internal text utilities
- * These are *not* exported for use outside of components.
- */
-@layer utilities {
-  /* paragraphs */
-
-  .para-lg,
-  .para-md,
-  .para-sm,
-  .para-xs {
-    @apply font-body;
-  }
-
-  .para-lg {
-    @apply text-para-lg;
-  }
-
-  .para-md {
-    @apply text-para-md;
-  }
-
-  .para-sm {
-    @apply text-para-sm;
-  }
-
-  .para-xs {
-    @apply text-para-xs;
-  }
-
-  /* labels */
-
-  .label-lg,
-  .label-md,
-  .label-sm,
-  .label-xs,
-  .label-xxs {
-    @apply font-body font-semibold;
-  }
-
-  .label-lg {
-    @apply text-label-lg;
-  }
-
-  .label-md {
-    @apply text-label-md;
-  }
-
-  .label-sm {
-    @apply text-label-sm;
-  }
-
-  .label-xs {
-    @apply text-label-xs;
-  }
-
-  .label-xxs {
-    @apply text-label-xxs;
-  }
-
-  /* standard subheadings */
-
-  .subheading-1,
-  .subheading-2,
-  .subheading-3,
-  .subheading-4 {
-    @apply font-body font-[500];
-  }
-
-  .subheading-1 {
-    @apply text-subheading-1;
-  }
-
-  .subheading-2 {
-    @apply text-subheading-2;
-  }
-
-  .subheading-3 {
-    @apply text-subheading-3;
-  }
-
-  .subheading-4 {
-    @apply text-subheading-4;
-  }
-
-  /* standard headings */
-
-  .heading-1,
-  .heading-2,
-  .heading-3,
-  .heading-4,
-  .heading-5,
-  .heading-6 {
-    @apply font-body font-bold;
-  }
-
-  .heading-1 {
-    @apply text-heading-1;
-  }
-
-  .heading-2 {
-    @apply text-heading-2;
-  }
-
-  .heading-3 {
-    @apply text-heading-3;
-  }
-
-  .heading-4 {
-    @apply text-heading-4;
-  }
-
-  .heading-5 {
-    @apply text-heading-5;
-  }
-
-  .heading-6 {
-    @apply text-heading-6;
-  }
-
-  /* display headings */
-
-  .display-1,
-  .display-2,
-  .display-3,
-  .display-4 {
-    @apply font-display font-bold;
-  }
-
-  .display-1 {
-    @apply text-display-1;
-  }
-
-  .display-2 {
-    @apply text-display-2;
-  }
-
-  .display-3 {
-    @apply text-display-3;
-  }
-
-  .display-4 {
-    @apply text-display-4;
-  }
-
-  /* branded headings */
-
-  .branded-heading-1,
-  .branded-heading-2,
-  .branded-heading-3,
-  .branded-heading-4,
-  .branded-heading-5,
-  .branded-heading-6 {
-    @apply font-branded font-bold;
-  }
-
-  .branded-heading-1 {
-    @apply text-heading-1;
-  }
-
-  .branded-heading-2 {
-    @apply text-heading-2;
-  }
-
-  .branded-heading-3 {
-    @apply text-heading-3;
-  }
-
-  .branded-heading-4 {
-    @apply text-heading-4;
-  }
-
-  .branded-heading-5 {
-    @apply text-heading-5;
-  }
-
-  .branded-heading-6 {
-    @apply text-heading-6;
-  }
-
-  .coco-branded-heading-6 {
-    @apply font-branded text-heading-6 font-bold;
-  }
-
-  /* branded display headings */
-
-  .branded-display-1,
-  .branded-display-2,
-  .branded-display-3,
-  .branded-display-4 {
-    @apply font-branded font-bold;
-  }
-
-  .branded-display-1 {
-    @apply text-display-1;
-  }
-
-  .branded-display-2 {
-    @apply text-display-2;
-  }
-
-  .branded-display-3 {
-    @apply text-display-3;
-  }
-
-  .branded-display-4 {
-    @apply text-display-4;
-  }
-}
-
 /*
  * Public text utilities
  * These are exported as utility classes for use outside of components.

data/app/assets/css/coco.css

@@ -0,0 +1,3 @@
+@import "./base/setup";
+
+@import-glob "@components/!(app|book)/**/*.css";

data/app/assets/css/plugins/aspect.js

@@ -0,0 +1,27 @@
+const plugin = require("tailwindcss/plugin");
+
+// Safari 14-compatible aspect ratio
+module.exports = plugin(function ({ matchUtilities, theme }) {
+  matchUtilities(
+    {
+      aspect: (value) => ({
+        "@supports (aspect-ratio: 1 / 1)": {
+          aspectRatio: value,
+        },
+        "@supports not (aspect-ratio: 1 / 1)": {
+          "&::before": {
+            content: '""',
+            float: "left",
+            paddingTop: `calc(100% / (${value}))`,
+          },
+          "&::after": {
+            clear: "left",
+            content: '""',
+            display: "block",
+          },
+        },
+      }),
+    },
+    { values: theme("aspectRatio") }
+  );
+});

data/app/assets/css/plugins/colors.js

@@ -0,0 +1,30 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".bg-gray-blend-50": {
+      "@apply bg-gray-transparent-50": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".bg-gray-blend-100": {
+      "@apply bg-gray-transparent-100": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".bg-gray-blend-200": {
+      "@apply bg-gray-transparent-200": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".border-gray-blend-50": {
+      "@apply border-gray-transparent-50": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".border-gray-blend-100": {
+      "@apply border-gray-transparent-100": {},
+      "background-blend-mode": "hard-light",
+    },
+    ".border-gray-blend-200": {
+      "@apply border-gray-transparent-200": {},
+      "background-blend-mode": "hard-light",
+    },
+  });
+});

data/app/assets/css/plugins/icons.js

@@ -0,0 +1,17 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".icon": {},
+    ".icon-stroke": {
+      "@apply fill-none stroke-2 stroke-current text-current": {},
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+    },
+    ".icon-fill": {
+      "@apply fill-current text-current": {},
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+    },
+  });
+});

data/app/assets/css/plugins/layout.js

@@ -0,0 +1,15 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".pl-app": {
+      "@apply pl-3 sm:pl-6 md:pl-8 lg:pl-10 xl:pl-11": {},
+    },
+    ".pr-app": {
+      "@apply pr-3 sm:pr-6 md:pr-8 lg:pr-10 xl:pr-11": {},
+    },
+    ".px-app": {
+      "@apply pl-app pr-app": {},
+    },
+  });
+});

data/app/assets/css/plugins/text.js

@@ -0,0 +1,183 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".para-lg, .para-md, .para-sm, .para-xs": {
+      "@apply font-body": {},
+    },
+
+    ".para-lg": {
+      "@apply text-para-lg": {},
+    },
+
+    ".para-md": {
+      "@apply text-para-md": {},
+    },
+
+    ".para-sm": {
+      "@apply text-para-sm": {},
+    },
+
+    ".para-xs": {
+      "@apply text-para-xs": {},
+    },
+
+    /* labels */
+
+    ".label-lg, .label-md, .label-sm, .label-xs, .label-xxs": {
+      "@apply font-body font-semibold": {},
+    },
+
+    ".label-lg": {
+      "@apply text-label-lg": {},
+    },
+
+    ".label-md": {
+      "@apply text-label-md": {},
+    },
+
+    ".label-sm": {
+      "@apply text-label-sm": {},
+    },
+
+    ".label-xs": {
+      "@apply text-label-xs": {},
+    },
+
+    ".label-xxs": {
+      "@apply text-label-xxs": {},
+    },
+
+    /* standard subheadings */
+
+    ".subheading-1, .subheading-2, .subheading-3, .subheading-4": {
+      "@apply font-body font-[500]": {},
+    },
+
+    ".subheading-1": {
+      "@apply text-subheading-1": {},
+    },
+
+    ".subheading-2": {
+      "@apply text-subheading-2": {},
+    },
+
+    ".subheading-3": {
+      "@apply text-subheading-3": {},
+    },
+
+    ".subheading-4": {
+      "@apply text-subheading-4": {},
+    },
+
+    /* standard headings */
+
+    ".heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6": {
+      "@apply font-body font-bold": {},
+    },
+
+    ".heading-1": {
+      "@apply text-heading-1": {},
+    },
+
+    ".heading-2": {
+      "@apply text-heading-2": {},
+    },
+
+    ".heading-3": {
+      "@apply text-heading-3": {},
+    },
+
+    ".heading-4": {
+      "@apply text-heading-4": {},
+    },
+
+    ".heading-5": {
+      "@apply text-heading-5": {},
+    },
+
+    ".heading-6": {
+      "@apply text-heading-6": {},
+    },
+
+    /* display headings */
+
+    ".display-1, .display-2, .display-3, .display-4": {
+      "@apply font-display font-bold": {},
+    },
+
+    ".display-1": {
+      "@apply text-display-1": {},
+    },
+
+    ".display-2": {
+      "@apply text-display-2": {},
+    },
+
+    ".display-3": {
+      "@apply text-display-3": {},
+    },
+
+    ".display-4": {
+      "@apply text-display-4": {},
+    },
+
+    /* branded headings */
+
+    ".branded-heading-1, .branded-heading-2, .branded-heading-3, .branded-heading-4, .branded-heading-5, .branded-heading-6":
+      {
+        "@apply font-branded font-bold": {},
+      },
+
+    ".branded-heading-1": {
+      "@apply text-heading-1": {},
+    },
+
+    ".branded-heading-2": {
+      "@apply text-heading-2": {},
+    },
+
+    ".branded-heading-3": {
+      "@apply text-heading-3": {},
+    },
+
+    ".branded-heading-4": {
+      "@apply text-heading-4": {},
+    },
+
+    ".branded-heading-5": {
+      "@apply text-heading-5": {},
+    },
+
+    ".branded-heading-6": {
+      "@apply text-heading-6": {},
+    },
+
+    ".coco-branded-heading-6": {
+      "@apply font-branded text-heading-6 font-bold": {},
+    },
+
+    /* branded display headings */
+
+    ".branded-display-1, .branded-display-2, .branded-display-3, .branded-display-4":
+      {
+        "@apply font-branded font-bold": {},
+      },
+
+    ".branded-display-1": {
+      "@apply text-display-1": {},
+    },
+
+    ".branded-display-2": {
+      "@apply text-display-2": {},
+    },
+
+    ".branded-display-3": {
+      "@apply text-display-3": {},
+    },
+
+    ".branded-display-4": {
+      "@apply text-display-4": {},
+    },
+  });
+});

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