coveragebook_components 0.12.1 → 0.13.0

data/app/assets/css/app.css

@@ -1,9 +1,3 @@
-@import "./app/config";
-@import "./base";
+@import "./base/setup";
 
-@import "./app/utils";
-@import "./app/tippy";
-
-@import-glob "@sharedComponents/**/*.css";
-@import-glob "@appComponents/**/*.css";
-@import-glob "@bookComponents/**/*.css";
+@import-glob "@components/**/*.css";

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

@@ -0,0 +1 @@
+@config "../../../../config/tailwind.config.cjs";

data/app/assets/css/{base.css → base/setup.css}

@@ -1,11 +1,14 @@
+@import "./config";
+
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "./shared/utils/colors";
-@import "./shared/utils/icons";
-@import "./shared/utils/text";
-@import "./shared/tippy";
+@import "./utils/layout";
+@import "./utils/colors";
+@import "./utils/icons";
+@import "./utils/text";
+@import "./tippy";
 
 @layer base {
   :root {

data/app/assets/css/{shared → base}/tippy.css

@@ -43,4 +43,22 @@
       @apply fill-gray-900;
     }
   }
+
+  /*
+   * 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;
+  }
+}
+
+@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;
+  }
 }

data/app/assets/css/book.css

@@ -1,5 +1,3 @@
-@import "./book/config";
-@import "./base";
+@import "./base/setup";
 
-@import-glob "@sharedComponents/**/*.css";
-@import-glob "@bookComponents/**/*.css";
+@import-glob "@components/!(app)/**/*.css";

data/app/assets/js/app.js

@@ -1,14 +1,30 @@
-import packageJSON from "@/package.json" assert { type: "json" };
+import { registerComponents } from "@helpers/alpine";
+import { navigateTo } from "@helpers/location";
+import { Alpine } from "./base/setup";
 
-console.info("Initializing Coco JS", packageJSON.version);
+import components from "@components/**/*.js";
+registerComponents(components);
 
-import "container-query-polyfill";
-import Alpine from "@assets/js/libs/alpine";
+// 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);
+  }
+});
 
-import "./app/setup";
-
-import "./shared/components";
-import "./book/components";
-import "./app/components";
+// 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();

data/app/assets/js/{libs → base}/alpine/directives/dropdown.js

@@ -1,4 +1,4 @@
-import tippy from "@assets/js/libs/tippy";
+import tippy from "@assets/js/base/tippy";
 import buildConfig from "../utils/tippy_modifiers";
 import { isObject } from "@helpers/lang";
 import { isNode } from "@helpers/dom";

data/app/assets/js/{libs → base}/alpine/directives/tooltip.js

@@ -1,4 +1,4 @@
-import tippy from "@assets/js/libs/tippy";
+import tippy from "@assets/js/base/tippy";
 import buildConfig from "../utils/tippy_modifiers";
 import { setData } from "@helpers/alpine";
 

data/app/assets/js/{libs → base}/alpine/index.js

@@ -6,13 +6,13 @@ import intersect from "@alpinejs/intersect";
 import mask from "@alpinejs/mask";
 import focus from "@alpinejs/focus";
 
-import undo from "@assets/js/libs/alpine/directives/undo";
-import options from "@assets/js/libs/alpine/directives/options";
-import tooltip from "@assets/js/libs/alpine/directives/tooltip";
-import destroy from "@assets/js/libs/alpine/directives/destroy";
-import dropdown from "@assets/js/libs/alpine/directives/dropdown";
-import dimensions from "@assets/js/libs/alpine/directives/dimensions";
-import notification from "@assets/js/libs/alpine/directives/notification";
+import undo from "@assets/js/base/alpine/directives/undo";
+import options from "@assets/js/base/alpine/directives/options";
+import tooltip from "@assets/js/base/alpine/directives/tooltip";
+import destroy from "@assets/js/base/alpine/directives/destroy";
+import dropdown from "@assets/js/base/alpine/directives/dropdown";
+import dimensions from "@assets/js/base/alpine/directives/dimensions";
+import notification from "@assets/js/base/alpine/directives/notification";
 
 window.Alpine = Alpine;
 

data/app/assets/js/{libs → base}/alpine/utils/tippy_modifiers.js

@@ -1,4 +1,4 @@
-import { followCursor } from "@assets/js/libs/tippy";
+import { followCursor } from "@assets/js/base/tippy";
 
 export default function tippyModifiers(modifiers) {
   if (modifiers.length === 0) return {};

data/app/assets/js/base/setup.js

@@ -0,0 +1,8 @@
+import packageJSON from "@/package.json" assert { type: "json" };
+
+import "container-query-polyfill";
+import Alpine from "./alpine";
+
+console.info("Initializing Coco JS", packageJSON.version);
+
+export { Alpine };

data/app/assets/js/book.js

@@ -1,8 +1,8 @@
-import "container-query-polyfill";
+import { registerComponents } from "@helpers/alpine";
+import { Alpine } from "./base/setup";
 
-import Alpine from "@assets/js/libs/alpine";
+import components from "@components/!(app)/**/*.js";
 
-import "./shared/components";
-import "./book/components";
+registerComponents(components);
 
 Alpine.start();

data/app/components/coco/app/{layouts/application/application.css → application_layout/application_layout.css}

@@ -107,11 +107,11 @@
       }
     }
 
-    @media screen(sm) and screen(max-md) {
+    @media screen(sm) and screen(max-xl) {
       --sidebar-nav-width: theme(width.16);
     }
 
-    @media screen(md) {
+    @media screen(xl) {
       --sidebar-nav-width: theme(width.24);
     }
 

data/app/components/coco/app/{layouts/application/application.js → application_layout/application_layout.js}

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

data/app/components/coco/app/application_layout/application_layout.rb

@@ -0,0 +1,16 @@
+module Coco
+  module App
+    class ApplicationLayout < Coco::Component
+      component_name :application_layout
+
+      renders_one :flashes
+      renders_one :banner
+      renders_one :header
+      renders_one :sidebar_nav
+
+      def banner_content?
+        banner.to_s.strip != ""
+      end
+    end
+  end
+end

data/app/components/coco/app/contact_callout/contact_callout.rb

@@ -0,0 +1,21 @@
+module Coco
+  module App
+    class ContactCallout < Coco::Component
+      renders_one :avatar, ->(*args, **kwargs) do
+        coco_avatar(*args, **kwargs, size: :full)
+      end
+
+      renders_one :action, ->(*args, **kwargs, &block) do
+        coco_button(*args, theme: :primary, **kwargs, &block)
+      end
+
+      renders_many :contact_numbers, ->(region, number) do
+        @contact_numbers << {region:, number:}
+      end
+
+      def initialize(**kwargs)
+        @contact_numbers = []
+      end
+    end
+  end
+end

data/app/components/coco/app/faqs/faqs.rb

@@ -0,0 +1,14 @@
+module Coco
+  module App
+    class Faqs < Coco::Component
+      renders_many :entries, ->(question, id: nil, &block) do
+        @entries << {question:, answer: block.call, id:}
+      end
+
+      def initialize(title: "Frequently asked questions", **)
+        @title = title
+        @entries = []
+      end
+    end
+  end
+end

data/app/components/coco/app/{blocks/header → header}/header.js

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

data/app/components/coco/app/header/header.rb

@@ -0,0 +1,33 @@
+module Coco
+  module App
+    class Header < Coco::Component
+      renders_one :primary_nav, ->(**kwargs) do
+        Coco::ButtonGroup.new(
+          theme: :text_neutral_light,
+          collapsible: false,
+          size: :xs,
+          **kwargs
+        )
+      end
+
+      renders_one :secondary_nav, ->(**kwargs) do
+        Coco::ButtonGroup.new(
+          theme: :text_neutral_light,
+          collapsible: false,
+          size: :xs,
+          **kwargs
+        )
+      end
+
+      renders_one :mobile_nav, ->(**kwargs) do
+        Coco::App::NavDrawer.new(**kwargs)
+      end
+
+      attr_reader :home_path
+
+      def initialize(home_path: nil, **)
+        @home_path = home_path
+      end
+    end
+  end
+end

data/app/components/coco/app/{blocks/nav_drawer → nav_drawer}/nav_drawer.css

@@ -38,7 +38,7 @@
       @apply h-0 border-t border-gray-300 my-3;
     }
 
-    [data-component="app-notice"] {
+    [data-component="notice"] {
       @apply mb-4;
     }
 

data/app/components/coco/app/{blocks/nav_drawer → nav_drawer}/nav_drawer.js

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

data/app/components/coco/app/nav_drawer/nav_drawer.rb

@@ -0,0 +1,32 @@
+module Coco
+  module App
+    class NavDrawer < Coco::Component
+      renders_many :items, types: {
+        html: ->(&block) { block.call },
+        divider: ->(&block) { tag.div class: "nav-drawer-divider" },
+        heading: ->(text, **kwargs, &block) do
+          tag.h4(text, class: "nav-drawer-heading")
+        end,
+        button: ->(*args, **kwargs, &block) do
+          coco_button(*args, **kwargs, theme: nil, size: :md, fit: :full, class: "nav-drawer-button", &block)
+        end
+      }
+
+      def with_divider(...)
+        with_item_divider(...)
+      end
+
+      def with_html(...)
+        with_item_html(...)
+      end
+
+      def with_button(...)
+        with_item_button(...)
+      end
+
+      def with_heading(...)
+        with_item_heading(...)
+      end
+    end
+  end
+end

data/app/components/coco/app/plan_card/plan_card.rb

@@ -0,0 +1,39 @@
+module Coco
+  module App
+    class PlanCard < Coco::Component
+      include Concerns::AcceptsOptions
+
+      accepts_option :active, from: [true, false]
+      accepts_option :recommended, from: [true, false]
+
+      renders_one :action, ->(*args, **kwargs, &block) do
+        coco_button(*args, **kwargs,
+          size: :sm,
+          fit: :full,
+          disabled: active?,
+          &block)
+      end
+
+      renders_many :benefits, ->(benefit, &block) do
+        @benefits[benefit] = block&.call
+      end
+
+      attr_reader :name, :price, :promo
+
+      def initialize(name:, price:, promo: nil, **kwargs)
+        @name = name
+        @price = price
+        @promo = promo
+        @benefits = {}
+      end
+
+      def recommended?
+        get_option_value(:recommended) == true
+      end
+
+      def active?
+        get_option_value(:active) == true
+      end
+    end
+  end
+end

data/app/components/coco/app/{blocks/plan_picker → plan_picker}/plan_picker.css

@@ -5,7 +5,7 @@
     .plan-picker-controls {
       @apply space-y-4;
 
-      [data-component="app-option-bar"] {
+      [data-component="option-bar"] {
         @apply mx-auto;
       }
 
@@ -54,7 +54,7 @@
 
         .plan-picker-currency
           + .plan-picker-interval
-          > [data-component="app-option-bar"] {
+          > [data-component="option-bar"] {
           @apply mr-0;
         }
       }
@@ -66,7 +66,7 @@
 
     @container (min-width: 984px) {
       .plan-picker-controls {
-        .plan-picker-interval > [data-component="app-option-bar"] {
+        .plan-picker-interval > [data-component="option-bar"] {
           @apply !mx-auto;
         }
 

data/app/components/coco/app/{blocks/plan_picker → plan_picker}/plan_picker.js

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

data/app/components/coco/app/plan_picker/plan_picker.rb

@@ -0,0 +1,25 @@
+module Coco
+  module App
+    class PlanPicker < Coco::Component
+      include Concerns::AcceptsOptions
+
+      accepts_option :slider, from: [true, false], default: false
+
+      renders_one :currency_selector, "Coco::OptionBar"
+      renders_one :interval_selector, "Coco::OptionBar"
+      renders_one :view_toggle, ->(*args, **kwargs, &block) do
+        coco_button(*args, icon: :award, theme: :secondary, size: :md, **kwargs, &block)
+      end
+
+      renders_many :plans, ->(**kwargs, &block) do
+        if kwargs.any?
+          Coco::App::PlanCard.new(**kwargs)
+        else
+          block.call
+        end
+      end
+
+      def slider? = get_option_value(:slider) == true
+    end
+  end
+end

data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/item/item.js

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

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

@@ -0,0 +1,48 @@
+module Coco
+  module App
+    module SidebarNav
+      class Item < Coco::Component
+        include Concerns::Extendable
+        include Concerns::AcceptsOptions
+
+        tag_attr :href
+        component_name :app_sidebar_nav_item
+
+        accepts_option :active, from: [true, false]
+        accepts_option :emphasise, from: [true, false]
+
+        renders_one :icon
+        renders_one :menu
+
+        before_render do
+          if @icon && !icon?
+            with_icon { coco_icon(@icon, size: :full) }
+          end
+
+          if link? && get_option_value(:active).nil?
+            set_option_value(:active, helpers.current_page?(tag_attr(:href)))
+          end
+        end
+
+        attr_reader :label
+
+        def initialize(label:, icon: nil, **)
+          @label = label
+          @icon = icon
+        end
+
+        def link?
+          tag_attr?(:href) && !menu?
+        end
+
+        def item_tag
+          link? ? :a : :button
+        end
+
+        def menu_id
+          "#{tag_attr(:id)}-menu" if tag_attr?(:id)
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/menu/menu.js

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

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

@@ -0,0 +1,46 @@
+module Coco
+  module App
+    module SidebarNav
+      class Menu < Coco::Component
+        component_name :app_sidebar_nav_menu
+
+        renders_many :items, types: {
+          link: ->(label, href, qualifier: nil, **kwargs, &block) do
+            if items.size < max_links
+              coco_link(href, **kwargs, theme: nil, underline: false) do
+                tag.span(label, class: "menu-item-label") +
+                  tag.span(qualifier, class: "menu-item-qualifier")
+              end
+            else
+              overflow_items << ["#{label}#{qualifier.present? ? " (#{qualifier})" : ""}", href]
+              nil
+            end
+          end,
+          block_link: ->(href, **kwargs, &block) do
+            coco_link(href, **kwargs, theme: nil, underline: false, &block)
+          end
+        }
+
+        renders_one :action, ->(*args, **kwargs, &block) do
+          coco_button(*args, theme: :primary, **kwargs, size: :sm, fit: :full, &block)
+        end
+
+        attr_reader :max_links, :overflow_items, :prompt
+
+        def initialize(max_links: 6, prompt: "More links...", **kwargs)
+          @max_links = max_links
+          @prompt = prompt
+          @overflow_items = []
+        end
+
+        def with_link(...)
+          with_item_link(...)
+        end
+
+        def with_block_link(...)
+          with_item_block_link(...)
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/navbar/navbar.html.erb

@@ -1,7 +1,7 @@
 <%= render component_tag(x: {data: "appSidebarNav"}) do %>
   <% if actions? %>
     <div class="nav-item nav-item-action">
-      <%= render Coco::App::Blocks::SidebarNav::Item.new(label: "Add") do |item| %>
+      <%= render Coco::App::SidebarNav::Item.new(label: "Add") do |item| %>
         <% item.with_icon do %>
           <span class="nav-item-action-button">
             <%= coco_icon :plus, size: :full %>

data/app/components/coco/app/{blocks/sidebar_nav → sidebar_nav}/navbar/navbar.js

@@ -1,7 +1,7 @@
 import tokens from "@config/tokens.cjs";
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 
-const mobileMaxWidth = parseInt(tokens.app.screens.sm, 10);
+const mobileMaxWidth = parseInt(tokens.screens.sm, 10);
 
 export default CocoComponent("appSidebarNav", () => {
   return {

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

@@ -0,0 +1,50 @@
+module Coco
+  module App
+    module SidebarNav
+      class Navbar < Coco::Component
+        include Coco::AppComponentsHelper
+
+        tag_name :nav
+        component_name :app_sidebar_nav
+
+        renders_many :actions, ->(label, href, icon:, **kwargs) do
+          actions_data << {label: label, href: href, icon: icon, **kwargs}
+        end
+
+        renders_many :items, types: {
+          link: ->(label, href, show_on_mobile: true, **kwargs, &block) do
+            nav_item(mobile: show_on_mobile) do
+              render Coco::App::SidebarNav::Item.new(label: label, href: href, **kwargs), &block
+            end
+          end,
+          menu: ->(label, show_on_mobile: true, **kwargs, &block) do
+            nav_item(mobile: show_on_mobile) do
+              render Coco::App::SidebarNav::Item.new(label: label, **kwargs) do |item|
+                item.with_menu(&block)
+              end
+            end
+          end
+        }
+
+        attr_reader :actions_data
+
+        def initialize(**)
+          @actions_data = []
+          @menus_data = {}
+        end
+
+        def nav_item(mobile: true, &block)
+          tag.div(class: "nav-item", data: {show_on_mobile: mobile.to_s}, &block)
+        end
+
+        def with_link(...)
+          with_item_link(...)
+        end
+
+        def with_menu(...)
+          with_item_menu(...)
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/{blocks/slide_editor → slide_editor}/slide_editor.js

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 import { getData } from "@helpers/alpine";
 import { captureElementScreenshot } from "@helpers/screenshot";
 import { isDark } from "@helpers/color";
@@ -84,7 +84,7 @@ export default CocoComponent("appSlideEditor", (data) => {
 
     updateTextareaSizes() {
       const inputs = this.$root.querySelectorAll(
-        "[data-component='app-seamless-textarea']"
+        "[data-component='seamless-textarea']"
       );
       Array.from(inputs).forEach((el) => getData(el).onResize());
     },