coveragebook_components 0.7.9 → 0.8.0.beta.1

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

@@ -1,9 +1,30 @@
-<%= render component_tag do %>
-  <header class="app-header">
-    <%= banner %>
-    <%= navbar %>
-  </header>
-  <main class="app-main">
+<%= render component_tag(
+  x: {
+    data: x_data("appLayout", banner: banner? && banner_content?),
+    ":class": "{'with-banner': banner}"
+  },
+  class: {
+    "with-sidebar-nav": sidebar_nav?,
+    "with-banner": banner? && banner_content?,
+    "with-header": header?
+  }) do %>  
+  <% if banner? && banner_content? %>
+    <div class="layout-banner" data-role="app-banner" role="banner" @banner:dismiss="hideBanner">
+      <%= banner %>
+    </div>
+  <% end %>
+  <% if header? %>
+    <div class="layout-header" data-role="app-header">
+      <%= header %>
+    </div>
+  <% end %>
+  <% if sidebar_nav? %>
+    <div class="layout-sidebar-nav" data-role="app-sidebar-nav">
+      <%= sidebar_nav %>
+    </div>
+  <% end %>
+  <div class="layout-body" data-role="app-body">
     <%= content %>
-  </main>
+  </div>
+  <%= flashes %>
 <% end %>

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

@@ -0,0 +1,16 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appLayout", (opts) => {
+  return {
+    banner: false,
+
+    init() {
+      this.banner = opts.banner;
+    },
+
+    hideBanner() {
+      this.banner = false;
+      this.$el.remove();
+    },
+  };
+});

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

@@ -2,10 +2,18 @@ module Coco
   module App
     module Layouts
       class Application < Coco::Component
-        renders_one :banner, Blocks::Banner
-        renders_one :navbar, Blocks::NavBar
+        include Concerns::AcceptsOptions
 
-        component_name :app_application_layout
+        renders_one :flashes
+        renders_one :banner
+        renders_one :header
+        renders_one :sidebar_nav
+
+        component_name :application_layout
+
+        def banner_content?
+          banner.to_s.strip != ""
+        end
       end
     end
   end

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

@@ -0,0 +1,25 @@
+@layer components {
+  [data-coco][data-component="avatar"] {
+    @apply block rounded-full overflow-hidden flex-none;
+
+    img {
+      @apply w-full rounded-full;
+    }
+
+    &[data-size="sm"] {
+      @apply w-5 h-5;
+    }
+
+    &[data-size="md"] {
+      @apply w-6 h-6;
+    }
+
+    &[data-size="lg"] {
+      @apply w-7 h-7;
+    }
+
+    &[data-size="xl"] {
+      @apply w-8 h-8;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+module Coco
+  class Avatar < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, from: %i[sm md lg xl], default: :md
+
+    attr_reader :src, :name
+
+    def initialize(src:, name: nil, **)
+      @src = src
+      @name = name
+    end
+
+    def call
+      render component_tag do
+        tag.img src: src, alt: name
+      end
+    end
+  end
+end

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

@@ -35,11 +35,15 @@
     }
 
     &[data-size="xl"] {
-      @apply w-9 h-9;
+      @apply w-8 h-8;
     }
 
     &[data-size="xxl"] {
-      @apply w-12 h-12;
+      @apply w-10 h-10;
+    }
+
+    &[data-size="full"] {
+      @apply w-full h-full;
     }
 
     /* Motion */

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

@@ -6,7 +6,7 @@ module Coco
 
     InvalidIconError = Class.new(StandardError)
 
-    accepts_option :size, from: %i[xs sm md lg xl xxl]
+    accepts_option :size, from: %i[xs sm md lg xl xxl full]
     accepts_option :spin, from: [true, false]
     accepts_option :style, from: [:line, :fill, :custom]
 

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

@@ -7,7 +7,8 @@
     }
 
     .modal-container {
-      @apply relative flex min-h-screen justify-center items-center z-[10000] p-2 sm:p-8;
+      @apply relative flex justify-center items-center z-[10000] p-2 sm:p-8;
+      min-height: var(--app-height);
     }
 
     .modal-content {

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

@@ -12,7 +12,7 @@
       },
     ) do %>
       <div class="modal-overlay" x-bind="overlay"></div>
-      <div class="modal-container"  x-bind="container" x-ref="container">
+      <div class="modal-container" x-bind="container" x-ref="container">
         <div class="modal-content" x-trap.noscroll.inert.noreturn="open">
           <%= modal_content %>
         </div>

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

@@ -1,4 +1,5 @@
 import { CocoComponent } from "@js/coco";
+import { hideAll } from "@libs/tippy";
 
 export default CocoComponent("modal", () => {
   return {
@@ -19,6 +20,7 @@ export default CocoComponent("modal", () => {
 
     show() {
       this.open = true;
+      hideAll();
       setTimeout(() => {
         this.$dispatch("modal:shown");
       }, 400);

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

@@ -16,12 +16,12 @@ export default CocoComponent("modalLightbox", () => {
 
     imageLoaded() {
       this.loaded = true;
-      this.$nextTick(() => {
+      setTimeout(() => {
         const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
         if (!isNaN(scrollTop) && scrollTop !== 0) {
           this.modal.scrollTo(scrollTop);
         }
-      });
+      }, 200);
     },
 
     get img() {

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

@@ -1,6 +1,20 @@
 @layer components {
   [data-coco][data-component="placeholder"] {
-    @apply border border-dashed border-gray-400 p-4 bg-gray-50 text-center;
+    @apply p-4;
+
+    &[data-boxed="true"] {
+      @apply border border-dashed border-gray-400 bg-gray-50;
+    }
+
+    &[data-prose="true"] {
+      .placeholder-content {
+        @apply space-y-3;
+      }
+    }
+
+    &[data-prose="false"] {
+      @apply text-center;
+    }
 
     &[data-size="full"] {
       @apply w-full h-full;

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

@@ -3,5 +3,7 @@ module Coco
     include Concerns::AcceptsOptions
 
     accepts_option :size, from: [:auto, :full], default: :auto
+    accepts_option :prose, from: [true, false], default: false
+    accepts_option :boxed, from: [true, false], default: true
   end
 end

data/app/components/coco/concerns/accepts_tag_attributes.rb

@@ -11,8 +11,8 @@ module Coco
           @_tag_name
         end
 
-        def tag_attr(*attr_names)
-          tag_attr_names.push(*attr_names)
+        def tag_attr(*)
+          tag_attr_names.push(*)
         end
 
         def tag_attr_names
@@ -48,6 +48,10 @@ module Coco
         tag_attrs.key?(attr_name)
       end
 
+      def tag_attr(attr_name, fallback = nil)
+        tag_attrs.fetch(attr_name, fallback)
+      end
+
       private
 
       def process_tag_attrs(args)

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -4,24 +4,42 @@ module Coco
       extend ActiveSupport::Concern
       include Coco::AppHelper
 
+      BUTTON_TYPES = {
+        menu: "Coco::App::Elements::MenuButton",
+        color_picker: "Coco::App::Elements::ColorPickerButton",
+        layout_picker: "Coco::App::Elements::LayoutPickerButton",
+        image_picker: "Coco::App::Elements::ImagePickerButton",
+        dropdown: "Coco::App::Elements::DropdownButton"
+      }
+
       included do
         renders_many :items, types: {
+          noop: -> {},
           divider: ->(**kwargs) { tag.div(class: "divider") },
-          button: ->(**kwargs) {
-            if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-              App::Elements::ButtonTo.new(**button_kwargs(kwargs, :button_to))
-            else
-              App::Elements::Button.new(**button_kwargs(kwargs, :button))
-            end
-          },
-          menu_button: ->(**kwargs) { App::Elements::MenuButton.new(**button_kwargs(kwargs, :menu)) },
-          color_picker_button: ->(**kwargs) { App::Elements::ColorPickerButton.new(**button_kwargs(kwargs, :color_picker)) },
-          layout_picker_button: ->(**kwargs) { App::Elements::LayoutPickerButton.new(**button_kwargs(kwargs, :layout_picker)) },
-          image_picker_button: ->(**kwargs) { App::Elements::ImagePickerButton.new(**button_kwargs(kwargs, :image_picker)) },
-          dropdown_button: ->(**kwargs) { App::Elements::DropdownButton.new(**button_kwargs(kwargs, :dropdown)) }
+          button: ->(*args, **kwargs, &block) { coco_button(*args, **button_kwargs(kwargs, :button), &block) },
+          menu_button: ->(*args, **kwargs, &block) { instantiate_button(:menu, *args, **kwargs, &block) },
+          dropdown_button: ->(*args, **kwargs, &block) { instantiate_button(:dropdown, *args, **kwargs, &block) },
+          color_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:color_picker, *args, **kwargs, &block) },
+          image_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:image_picker, *args, **kwargs, &block) },
+          layout_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:layout_picker, *args, **kwargs, &block) }
         }
       end
 
+      def instantiate_button(type, *args, **kwargs, &block)
+        href, content = if block
+          [args.first, nil]
+        else
+          (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+        end
+        component = BUTTON_TYPES[type].constantize.new(href: href, **button_kwargs(kwargs, type))
+        component.with_content(content) if !block && content.present?
+        component
+      end
+
+      def init_button_group
+        with_item_noop
+      end
+
       def with_divider(...)
         with_item_divider(...)
       end

data/app/helpers/coco/app_helper.rb

@@ -1,7 +1,11 @@
 module Coco
   module AppHelper
     def coco_link(*args, **, &block)
-      href, content = args[0..2].reverse!
+      href, content = if block
+        [args.first, nil]
+      else
+        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+      end
 
       link = Coco::App::Elements::Link.new(href: href, **)
       link = link.with_content(content) if !block && content.present?
@@ -10,7 +14,11 @@ module Coco
     end
 
     def coco_button(*args, **kwargs, &block)
-      href, content = args[0..2].reverse!
+      href, content = if block
+        [args.first, nil]
+      else
+        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+      end
 
       button = if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
         "ButtonTo"
@@ -87,5 +95,21 @@ module Coco
     def coco_fields(**, &block)
       fields(**, builder: Coco::AppFormBuilder, &block)
     end
+
+    def coco_layout(name, **, &block)
+      render coco_component("app/layouts/#{name}", **), &block
+    end
+
+    def coco_app_header(*, **, &block)
+      render Coco::App::Blocks::Header.new(*, **), &block
+    end
+
+    def coco_sidebar_nav(*, **, &block)
+      render Coco::App::Blocks::SidebarNav.new(*, **), &block
+    end
+
+    def coco_menu_item(type, **, &block)
+      render coco_component("app/elements/menu_items/#{type}", **), &block
+    end
   end
 end

data/app/helpers/coco/base_helper.rb

@@ -12,6 +12,10 @@ module Coco
       render Coco::Image.new(src: src, **)
     end
 
+    def coco_avatar(src, name = nil, **)
+      render Coco::Avatar.new(src: src, name: name, **)
+    end
+
     def coco_icon(icon_name = nil, **, &block)
       render Coco::Icon.new(name: icon_name, **), &block
     end
@@ -56,6 +60,8 @@ module Coco
     end
 
     def coco_modal_data_attributes(name = "default")
+      return {} if name.nil?
+
       {
         turbo: true,
         turbo_frame: coco_modal_frame_id(name)

data/app/helpers/coco/url_helper.rb

@@ -9,7 +9,11 @@ module Coco
 
       href = Coco::ActionViewHelper.url_target(name, options)
 
-      coco_link(name, href, **html_options.symbolize_keys!, &block)
+      if block
+        coco_link(href, **html_options.symbolize_keys!, &block)
+      else
+        coco_link(name, href, **html_options.symbolize_keys!)
+      end
     end
 
     def coco_button_to(name = nil, options = nil, html_options = nil, &block)

data/config/tailwind.base.config.cjs

@@ -26,6 +26,9 @@ module.exports = {
         spin: "spin 1.5s linear infinite",
         "spin-reverse": "spin 1.5s linear infinite reverse",
       },
+      width: {
+        18: "4.5rem",
+      },
       customForms: () => ({
         DEFAULT: {
           checkbox: {

data/config/tokens.cjs

@@ -90,6 +90,9 @@ const colorAliases = {
     ...colors.blue,
   },
   background: {
+    header: {
+      DEFAULT: "#427484",
+    },
     light: {
       1: colors.white,
       2: colors.gray[50],
@@ -136,6 +139,7 @@ const colorAliases = {
       DEFAULT: colors.green[500],
       dark: colors.green[600],
       inverse: colors.green[300],
+      "inverse-vivid": "#009979",
     },
     negative: {
       DEFAULT: colors.red[600],
@@ -168,6 +172,7 @@ const screens = {
   xl: "1200px",
   "2xl": "1400px",
   max: "1800px",
+  letterbox: { raw: "(max-height: 760px) and (min-width: 576px)" },
   print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
 };
 
@@ -177,6 +182,7 @@ const fontSize = {
   "para-md": ["16px", "24px"],
   "para-lg": ["18px", "27px"],
 
+  "label-xxs": ["10px", "12px"],
   "label-xs": ["12px", "14px"],
   "label-sm": ["14px", "16px"],
   "label-md": ["16px", "20px"],

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.9"
+  VERSION = "0.8.0.beta.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.9
+  version: 0.8.0.beta.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-17 00:00:00.000000000 Z
+date: 2023-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1323,6 +1323,7 @@ files:
 - app/assets/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/js/app.js
 - app/assets/js/app/components.js
+- app/assets/js/app/setup.js
 - app/assets/js/base/components.js
 - app/assets/js/book.js
 - app/assets/js/book/components.js
@@ -1332,6 +1333,7 @@ files:
 - app/assets/js/helpers/dom.js
 - app/assets/js/helpers/file.js
 - app/assets/js/helpers/lang.js
+- app/assets/js/helpers/location.js
 - app/assets/js/helpers/path.js
 - app/assets/js/helpers/screenshot.js
 - app/assets/js/helpers/turbo_events.js
@@ -1346,16 +1348,22 @@ files:
 - app/assets/js/libs/alpine/utils/tippy_modifiers.js
 - app/assets/js/libs/tippy/index.js
 - app/assets/js/libs/tippy/plugins/hide_on_esc.js
-- app/components/coco/app/blocks/banner/banner.css
-- app/components/coco/app/blocks/banner/banner.rb
-- app/components/coco/app/blocks/nav_bar/nav_bar.css
-- app/components/coco/app/blocks/nav_bar/nav_bar.html.erb
-- app/components/coco/app/blocks/nav_bar/nav_bar.js
-- app/components/coco/app/blocks/nav_bar/nav_bar.rb
+- app/components/coco/app/blocks/header/header.css
+- app/components/coco/app/blocks/header/header.html.erb
+- app/components/coco/app/blocks/header/header.js
+- app/components/coco/app/blocks/header/header.rb
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.css
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.html.erb
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.js
 - app/components/coco/app/blocks/nav_drawer/nav_drawer.rb
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.js
+- app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js
+- app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb
 - app/components/coco/app/blocks/slat/slat.css
 - app/components/coco/app/blocks/slat/slat.rb
 - app/components/coco/app/blocks/slide_editor/slide_editor.css
@@ -1408,6 +1416,9 @@ files:
 - app/components/coco/app/elements/menu_button/menu_button.html.erb
 - app/components/coco/app/elements/menu_button/menu_button.js
 - app/components/coco/app/elements/menu_button/menu_button.rb
+- app/components/coco/app/elements/menu_items/user_profile/user_profile.css
+- app/components/coco/app/elements/menu_items/user_profile/user_profile.html.erb
+- app/components/coco/app/elements/menu_items/user_profile/user_profile.rb
 - app/components/coco/app/elements/notice/notice.css
 - app/components/coco/app/elements/notice/notice.html.erb
 - app/components/coco/app/elements/notice/notice.js
@@ -1467,7 +1478,10 @@ files:
 - app/components/coco/app/fields/weekday_select_component.rb
 - app/components/coco/app/layouts/application/application.css
 - 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/base/avatar/avatar.css
+- app/components/coco/base/avatar/avatar.rb
 - app/components/coco/base/button/button.css
 - app/components/coco/base/button/button.html.erb
 - app/components/coco/base/button/button.js
@@ -1591,9 +1605,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: 3.2.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.4.19
 signing_key:

data/app/components/coco/app/blocks/banner/banner.css

@@ -1,5 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-banner"] {
-    @apply px-app py-2 text-center;
-  }
-}

data/app/components/coco/app/blocks/banner/banner.rb

@@ -1,8 +0,0 @@
-module Coco
-  module App
-    module Blocks
-      class Banner < Coco::Component
-      end
-    end
-  end
-end

data/app/components/coco/app/blocks/nav_bar/nav_bar.css

@@ -1,51 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-navbar"] {
-    @apply @container;
-
-    .nav-content {
-      @apply h-11 @lg:h-14 flex items-center bg-teal-700 px-app;
-    }
-
-    .nav-logo {
-      @apply flex-none mr-8;
-    }
-
-    .nav-logo-small {
-      @apply h-6 @lg:hidden;
-    }
-
-    .nav-logo-full {
-      @apply hidden @lg:block h-7;
-    }
-
-    .nav-links {
-      @apply flex items-center w-full overflow-hidden;
-    }
-
-    .nav-link-group {
-      @apply flex items-center gap-x-6;
-
-      .nav-button {
-        > .button-inner {
-          @apply whitespace-nowrap text-white gap-2 text-label-sm @5xl:text-label-md py-2;
-        }
-
-        [data-component="icon"] {
-          @apply w-4 h-4;
-        }
-      }
-    }
-
-    .nav-secondary {
-      @apply ml-auto;
-    }
-
-    .nav-mobile-controls {
-      @apply flex items-center ml-auto text-white -mr-2;
-
-      [data-component="app-button"] {
-        @apply p-2;
-      }
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-<%= render component_tag(x: {data: "appNavBar"}) do %>
-  <div class="nav-content">
-    <div class="nav-logo">
-      <%= image_tag asset_url("coco/img/coveragebook-logomark-white.svg"),
-            alt: "CoverageBook logomark",
-            class: "nav-logo-small" %>
-      <%= image_tag asset_url("coco/img/coveragebook-landscape-white.svg"),
-            alt: "CoverageBook full logo",
-            class: "nav-logo-full" %>
-    </div>
-    <div class="nav-links" x-ref="links">    
-      <div class="nav-link-group nav-primary" x-ref="primaryLinks" x-show="!mobile" x-cloak>
-        <%= safe_join(primary_buttons) %>
-      </div>
-      <div class="nav-link-group nav-secondary" x-ref="secondaryLinks" x-show="!mobile" x-cloak>
-        <%= safe_join(secondary_buttons) %>
-      </div>
-      <div class="nav-mobile-controls" x-show="mobile" x-cloak>
-        <%= coco_button(icon: :menu, theme: nil) %>
-      </div>
-    </div>
-  </div>
-<% end %>

data/app/components/coco/app/blocks/nav_bar/nav_bar.js

@@ -1,31 +0,0 @@
-import { CocoComponent } from "@js/coco";
-import { getHiddenElementDimensions as getSize } from "@helpers/dom";
-import tokens from "@config/tokens.cjs";
-
-export default CocoComponent("appNavBar", () => {
-  const mobileMaxWidth = parseInt(tokens.app.screens.md, 10);
-  return {
-    mobile: true,
-    init() {
-      const sizeObserver = new ResizeObserver(
-        Alpine.throttle((entries) => {
-          this.$nextTick(() => {
-            const navWidth = entries[0].contentRect.width;
-            const linksWidth = this.$refs.links.offsetWidth;
-            const primaryWidth = getSize(this.$refs.primaryLinks, "flex").width;
-            const secondaryWidth = getSize(
-              this.$refs.secondaryLinks,
-              "flex"
-            ).width;
-            const difference = linksWidth - primaryWidth - secondaryWidth;
-
-            this.mobile =
-              navWidth < mobileMaxWidth || this.mobudifference <= 50;
-          });
-        }, 20)
-      );
-
-      sizeObserver.observe(this.$root);
-    },
-  };
-});