coveragebook_components 0.8.5 → 0.8.6

data/app/assets/build/coco/icons/cake.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/><path d="M2 21h20"/><path d="M7 8v2"/><path d="M12 8v2"/><path d="M17 8v2"/><path d="M7 4h.01"/><path d="M12 4h.01"/><path d="M17 4h.01"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/><path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/><path d="M2 21h20"/><path d="M7 8v3"/><path d="M12 8v3"/><path d="M17 8v3"/><path d="M7 4h0.01"/><path d="M12 4h0.01"/><path d="M17 4h0.01"/></svg>

data/app/assets/build/coco/icons/check-circle-2.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

data/app/assets/build/coco/icons/check-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>

data/app/assets/build/coco/icons/check-square-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/></svg>

data/app/assets/build/coco/icons/check-square.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m9 11 3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>

data/app/assets/build/coco/icons/check.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>

data/app/assets/build/coco/icons/radiation.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 12h0"/><path d="M7.5 4.2c-.3-.5-.9-.7-1.3-.4C3.9 5.5 2.3 8.1 2 11c-.1.5.4 1 1 1h5c0-1.5.8-2.8 2-3.4-1.1-1.9-2-3.5-2.5-4.4z"/><path d="M21 12c.6 0 1-.4 1-1-.3-2.9-1.8-5.5-4.1-7.1-.4-.3-1.1-.2-1.3.3-.6.9-1.5 2.5-2.6 4.3 1.2.7 2 2 2 3.5h5z"/><path d="M7.5 19.8c-.3.5-.1 1.1.4 1.3 2.6 1.2 5.6 1.2 8.2 0 .5-.2.7-.8.4-1.3-.5-.9-1.4-2.5-2.5-4.3-1.2.7-2.8.7-4 0-1.1 1.8-2 3.4-2.5 4.3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 12h0.01"/><path d="M7.5 4.2c-.3-.5-.9-.7-1.3-.4C3.9 5.5 2.3 8.1 2 11c-.1.5.4 1 1 1h5c0-1.5.8-2.8 2-3.4-1.1-1.9-2-3.5-2.5-4.4z"/><path d="M21 12c.6 0 1-.4 1-1-.3-2.9-1.8-5.5-4.1-7.1-.4-.3-1.1-.2-1.3.3-.6.9-1.5 2.5-2.6 4.3 1.2.7 2 2 2 3.5h5z"/><path d="M7.5 19.8c-.3.5-.1 1.1.4 1.3 2.6 1.2 5.6 1.2 8.2 0 .5-.2.7-.8.4-1.3-.5-.9-1.4-2.5-2.5-4.3-1.2.7-2.8.7-4 0-1.1 1.8-2 3.4-2.5 4.3z"/></svg>

data/app/assets/build/coco/icons/ribbon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.75 9.01c-.52 2.08-1.83 3.64-3.18 5.49l-2.6 3.54-2.97 4-3.5-2.54 3.85-4.97c-1.86-2.61-2.8-3.77-3.16-5.44"/><path d="M17.75 9.01A7 7 0 0 0 6.2 9.1C6.06 8.5 6 7.82 6 7c0-3.5 2.83-5 5.98-5C15.24 2 18 3.5 18 7c0 .73-.09 1.4-.25 2.01Z"/><path d="m9.35 14.53 2.64-3.31"/><path d="m11.97 18.04 2.99 4 3.54-2.54-3.93-5"/><path d="M14 8c0 1-1 2-2.01 3.22C11 10 10 9 10 8a2 2 0 1 1 4 0"/></svg>

data/app/assets/build/coco/icons/tree-deciduous.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 19h8a4 4 0 0 0 3.8-2.8 4 4 0 0 0-1.6-4.5c1-1.1 1-2.7.4-4-.7-1.2-2.2-2-3.6-1.7a3 3 0 0 0-3-3 3 3 0 0 0-3 3c-1.4-.2-2.9.5-3.6 1.7-.7 1.3-.5 2.9.4 4a4 4 0 0 0-1.6 4.5A4 4 0 0 0 8 19Z"/><path d="M12 19v3"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z"/><path d="M12 19v3"/></svg>

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

@@ -1,4 +1,3 @@
-import bind from "alpinejs/src/utils/bind";
 import { kebabCase, camelCase, mapValues, keyBy } from "lodash";
 import { castAttributeValue } from "@helpers/dom";
 import { setData } from "@helpers/alpine";

data/app/components/coco/app/blocks/sidebar_nav/item/item.css

@@ -25,11 +25,11 @@
       @apply app-sidebar-nav-horizontal-item;
     }
 
-    @media screen(sm) and screen(max-md) {
+    @media screen(sm) and screen(max-xl) {
       @apply app-sidebar-nav-vertical-narrow-item;
     }
 
-    @media screen(md) {
+    @media screen(xl) {
       @apply app-sidebar-nav-vertical-wide-item;
     }
 

data/app/components/coco/app/blocks/sidebar_nav/menu/menu.css

@@ -61,11 +61,11 @@
       @apply app-sidebar-nav-menu-regular;
     }
 
-    @media screen(sm) and screen(max-md) {
+    @media screen(sm) and screen(max-xl) {
       @apply app-sidebar-nav-menu-small;
     }
 
-    @media screen(md) {
+    @media screen(xl) {
       @apply app-sidebar-nav-menu-regular;
     }
 

data/app/components/coco/app/blocks/sidebar_nav/navbar/navbar.css

@@ -6,11 +6,11 @@
       @apply app-sidebar-nav-horizontal;
     }
 
-    @media screen(sm) and screen(max-md) {
+    @media screen(sm) and screen(max-xl) {
       @apply app-sidebar-nav-vertical-narrow;
     }
 
-    @media screen(md) {
+    @media screen(xl) {
       @apply app-sidebar-nav-vertical-wide;
     }
 

data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb

@@ -64,6 +64,7 @@
                 role: "bg-image-picker"
               },
               x: {
+                "@image-picker:change": "bgImage = $event.detail.image",
                 modelable: "selectedImage",
                 model: "bgImage"
               }

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

@@ -24,13 +24,19 @@ export default CocoComponent("appImagePickerButton", ({ src }) => {
       const reader = new FileReader();
 
       reader.addEventListener("load", () => {
-        this.selectedImage = {
+        const selectedImage = {
           name: file.name,
           file,
           data: reader.result,
         };
 
-        this.dropdown.hide();
+        this.$dispatch("image-picker:change", { image: selectedImage });
+
+        this.selectedImage = selectedImage;
+
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
       });
 
       reader.readAsDataURL(file);

data/app/components/coco/app/layouts/application/application.css

@@ -2,6 +2,7 @@
   [data-coco][data-component="application-layout"] {
     @apply grid overflow-hidden absolute inset-0 w-screen;
     height: var(--app-height);
+    --sidebar-nav-width: 0;
 
     grid-template-areas: "body";
     grid-template-rows: 1fr;
@@ -105,5 +106,17 @@
         }
       }
     }
+
+    @media screen(sm) and screen(max-md) {
+      --sidebar-nav-width: theme(width.16);
+    }
+
+    @media screen(md) {
+      --sidebar-nav-width: theme(width.24);
+    }
+
+    @media screen(letterbox) {
+      --sidebar-nav-width: theme(width.16);
+    }
   }
 }

data/app/components/coco/app/layouts/application/application.rb

@@ -2,8 +2,6 @@ module Coco
   module App
     module Layouts
       class Application < Coco::Component
-        include Concerns::AcceptsOptions
-
         renders_one :flashes
         renders_one :banner
         renders_one :header

data/app/components/coco/app/layouts/page/page.css

@@ -0,0 +1,23 @@
+@layer components {
+  [data-coco][data-component="page-layout"] {
+    .page-body {
+      @apply pt-12 pb-12 px-app w-full;
+    }
+
+    .page-controls {
+      @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between;
+
+      left: var(--sidebar-nav-width, 0);
+
+      .page-control-next {
+        @apply ml-auto;
+      }
+    }
+
+    &[data-width="constrained"] {
+      .page-body {
+        @apply max-w-screen-2xl mx-auto;
+      }
+    }
+  }
+}

data/app/components/coco/app/layouts/page/page.html.erb

@@ -0,0 +1,27 @@
+<%= render component_tag(x: {data: x_data("pageLayout")}, class: ({"with-header": header?} if header?)) do %>
+  <% if header? %>
+    <header class="page-header" data-role="page-header">
+      <%= header %>
+    </header>
+  <% end %>
+  <div class="page-body" data-role="page-body">
+    <%= content %>
+  </div>
+  
+  <% if previous_link? || next_link? %>
+    <div class="page-controls">
+      <%= previous_link %>
+      <%= next_link %>
+    </div>
+  <% end %>
+
+  <% if hidden_sections? %>
+    <div class="hidden">
+      <% hidden_sections.each do |hidden| %>
+        <%= hidden %>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <%= poll_controller if poll_controller? %>
+<% end %>

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

@@ -0,0 +1,5 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("pageLayout", () => {
+  return {};
+});

data/app/components/coco/app/layouts/page/page.rb

@@ -0,0 +1,40 @@
+module Coco
+  module App
+    module Layouts
+      class Page < Coco::Component
+        include Concerns::AcceptsOptions
+
+        component_name :page_layout
+
+        accepts_option :width, from: [:full, :constrained], default: :constrained
+
+        renders_one :header
+        renders_many :hidden_sections
+
+        renders_one :previous_link, ->(**kwargs) do
+          Coco::PagerLink.new(**kwargs, direction: :previous, class: "page-control-previous")
+        end
+
+        renders_one :next_link, ->(**kwargs) do
+          Coco::PagerLink.new(**kwargs, direction: :next, class: "page-control-next")
+        end
+
+        renders_one :poll_controller, ->(interval) do
+          Coco::PollController.new(interval: interval)
+        end
+
+        before_render do
+          with_poll_controller(@poll) unless poll_controller? || @poll.nil?
+          with_next_link(href: @next_page) if @next_page
+          with_previous_link(href: @previous_page) if @previous_page
+        end
+
+        def initialize(poll: nil, **kwargs)
+          @poll = poll
+          @previous_page = kwargs[:previous]
+          @next_page = kwargs[:next]
+        end
+      end
+    end
+  end
+end

data/app/components/coco/base/pager_link/pager_link.css

@@ -0,0 +1,26 @@
+@layer components {
+  [data-coco][data-component="pager-link"] {
+    @apply block py-2.5 px-1 bg-background-dark-3 bg-opacity-40 hover:bg-opacity-60 scale-75 hover:scale-100 lg:scale-100 lg:hover:scale-125 transition-all;
+    width: min-content;
+
+    .coco-icon {
+      @apply relative text-content-light-1;
+    }
+
+    &[data-direction="previous"] {
+      @apply origin-left rounded-r-md;
+
+      .coco-icon {
+        @apply -ml-1;
+      }
+    }
+
+    &[data-direction="next"] {
+      @apply origin-right rounded-l-md;
+
+      .coco-icon {
+        @apply -mr-1;
+      }
+    }
+  }
+}

data/app/components/coco/base/pager_link/pager_link.html.erb

@@ -0,0 +1,3 @@
+<%= render component_tag(data: {role: "#{direction}-page"}) do %>
+  <%= icon %>
+<% end %>

data/app/components/coco/base/pager_link/pager_link.rb

@@ -0,0 +1,32 @@
+module Coco
+  class PagerLink < Coco::Component
+    include Concerns::AcceptsOptions
+
+    tag_name :a
+    tag_attr :href, :target
+
+    accepts_option :direction, from: %i[previous next], required: true
+
+    renders_one :icon, ->(name, **kwargs) do
+      Coco::Icon.new(**kwargs, name: name, size: :xxl)
+    end
+
+    before_render do
+      unless icon?
+        with_icon(next? ? :chevron_right : :chevron_left)
+      end
+    end
+
+    def direction
+      get_option_value(:direction)
+    end
+
+    def next?
+      direction == :next
+    end
+
+    def previous?
+      direction == :previous
+    end
+  end
+end

data/app/components/coco/base/poll_controller/poll_controller.css

@@ -0,0 +1,5 @@
+@layer components {
+  [data-coco][data-component="poll-controller"] {
+    @apply contents;
+  }
+}

data/app/components/coco/base/poll_controller/poll_controller.html.erb

@@ -0,0 +1,15 @@
+<%=
+  render component_tag(
+    id: "polling-controller",
+    x: {
+      data: "pollController",
+      "@turbo:load.document": "startPolling",
+      "@turbo:fetch-request-error": "queuePollRequest"
+    },
+    data: {
+      interval: interval.to_json,
+      cachebust: Time.now.to_i
+    }) do
+    helpers.turbo_frame_tag "polling-controller-frame"
+  end
+%>

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

@@ -0,0 +1,67 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("pollController", () => {
+  return {
+    polling: false,
+    frame: null,
+    pollTimer: null,
+
+    get interval() {
+      return parseInt(this.$root.dataset.interval || 0, 10);
+    },
+
+    init() {
+      this.frame = document.getElementById("polling-controller-frame");
+      this.observer = new MutationObserver(() => this.onUpdate());
+      this.observer.observe(this.$el, { attributes: true });
+    },
+
+    startPolling() {
+      if (this.interval > 0 && !this.polling) {
+        this.polling = true;
+        this.queuePollRequest(500);
+      }
+    },
+
+    onUpdate() {
+      this.$nextTick(() => {
+        this.$dispatch("dom-updates:complete", { html: document }); // for compatability with legacy components
+      });
+      this.queuePollRequest();
+    },
+
+    queuePollRequest(wait) {
+      if (this.pollTimer) clearTimeout(this.pollTimer);
+      if (this.interval > 0 && this.polling) {
+        this.pollTimer = setTimeout(
+          () => this.reloadFrame(),
+          wait || this.interval
+        );
+      }
+    },
+
+    reloadFrame() {
+      this.frame.addEventListener(
+        "turbo:before-fetch-request",
+        addStreamHeaders,
+        { once: true }
+      );
+      window.Turbo.visit(location.href, {
+        frame: this.frame.id,
+        action: "replace",
+      });
+    },
+
+    destroy() {
+      this.observer.disconnect();
+      this.polling = false;
+    },
+  };
+});
+
+function addStreamHeaders(event) {
+  const { headers } = event.detail.fetchOptions || {};
+  if (headers) {
+    headers.Accept = ["text/vnd.turbo-stream.html", headers.Accept].join(", ");
+  }
+}

data/app/components/coco/base/poll_controller/poll_controller.rb

@@ -0,0 +1,9 @@
+module Coco
+  class PollController < Coco::Component
+    attr_reader :interval
+
+    def initialize(interval:, **)
+      @interval = interval
+    end
+  end
+end

data/app/helpers/coco/app_helper.rb

@@ -115,5 +115,9 @@ module Coco
     def coco_menu_item(type, **, &block)
       render coco_component("app/elements/menu_items/#{type}", **), &block
     end
+
+    def coco_page(id, **, &block)
+      render coco_component("app/layouts/page", id: id, **), &block
+    end
   end
 end

data/config/icons.json

@@ -275,6 +275,7 @@
   "check-circle",
   "check-circle-2",
   "check-square",
+  "check-square-2",
   "chef-hat",
   "cherry",
   "chevron-down",
@@ -994,6 +995,7 @@
   "reply",
   "reply-all",
   "rewind",
+  "ribbon",
   "rocket",
   "rocking-chair",
   "roller-coaster",

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.8.5"
+  VERSION = "0.8.6"
 end

data/lib/tasks/coco_tasks.rake

@@ -15,10 +15,6 @@ namespace :coco do
     Rake::Task["standard"].execute
     puts "✅ standardrb complete"
 
-    puts "🥥 Running erblint..."
-    system "bundle exec erblint --lint-all"
-    puts "✅ erblint complete"
-
     puts "🥥 Running prettier..."
     system "npx prettier . --check --config ./package.json"
     puts "✅ prettier complete"
@@ -31,10 +27,6 @@ namespace :coco do
       Rake::Task["standard:fix"].execute
       puts "✅ standardrb complete"
 
-      puts "🥥 Running erb_lint..."
-      system "bundle exec erblint --lint-all --autocorrect"
-      puts "✅ erblint complete"
-
       puts "🥥 Running prettier..."
       system "npx prettier . --write --config ./package.json"
       puts "✅ prettier complete"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.5
+  version: 0.8.6
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-06 00:00:00.000000000 Z
+date: 2023-11-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -351,6 +351,7 @@ files:
 - app/assets/build/coco/icons/check-check.svg
 - app/assets/build/coco/icons/check-circle-2.svg
 - app/assets/build/coco/icons/check-circle.svg
+- app/assets/build/coco/icons/check-square-2.svg
 - app/assets/build/coco/icons/check-square.svg
 - app/assets/build/coco/icons/check.svg
 - app/assets/build/coco/icons/chef-hat.svg
@@ -1079,6 +1080,7 @@ files:
 - app/assets/build/coco/icons/reply-all.svg
 - app/assets/build/coco/icons/reply.svg
 - app/assets/build/coco/icons/rewind.svg
+- app/assets/build/coco/icons/ribbon.svg
 - app/assets/build/coco/icons/rocket.svg
 - app/assets/build/coco/icons/rocking-chair.svg
 - app/assets/build/coco/icons/roller-coaster.svg
@@ -1606,6 +1608,10 @@ files:
 - app/components/coco/app/layouts/application/application.html.erb
 - app/components/coco/app/layouts/application/application.js
 - app/components/coco/app/layouts/application/application.rb
+- app/components/coco/app/layouts/page/page.css
+- app/components/coco/app/layouts/page/page.html.erb
+- app/components/coco/app/layouts/page/page.js
+- app/components/coco/app/layouts/page/page.rb
 - app/components/coco/base/avatar/avatar.css
 - app/components/coco/base/avatar/avatar.rb
 - app/components/coco/base/button/button.css
@@ -1644,9 +1650,16 @@ files:
 - app/components/coco/base/modal_lightbox/modal_lightbox.html.erb
 - app/components/coco/base/modal_lightbox/modal_lightbox.js
 - app/components/coco/base/modal_lightbox/modal_lightbox.rb
+- app/components/coco/base/pager_link/pager_link.css
+- app/components/coco/base/pager_link/pager_link.html.erb
+- app/components/coco/base/pager_link/pager_link.rb
 - app/components/coco/base/placeholder/placeholder.css
 - app/components/coco/base/placeholder/placeholder.html.erb
 - app/components/coco/base/placeholder/placeholder.rb
+- app/components/coco/base/poll_controller/poll_controller.css
+- app/components/coco/base/poll_controller/poll_controller.html.erb
+- app/components/coco/base/poll_controller/poll_controller.js
+- app/components/coco/base/poll_controller/poll_controller.rb
 - app/components/coco/base/svg/svg.html.erb
 - app/components/coco/base/svg/svg.rb
 - app/components/coco/book/blocks/slides/editable_slide/editable_slide.css