coveragebook_components 0.9.1 → 0.10.1.beta.0

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

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

data/app/assets/js/shared/components.js

@@ -0,0 +1,4 @@
+import { registerComponents } from "@helpers/alpine";
+import sharedComponents from "@sharedComponents/**/*.js";
+
+export default registerComponents(sharedComponents);

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

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

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

@@ -3,7 +3,7 @@ module Coco
     module Blocks
       class Header < Coco::Component
         renders_one :primary_nav, ->(**kwargs) do
-          Coco::App::Elements::ButtonGroup.new(
+          Coco::ButtonGroup.new(
             theme: :text_neutral_light,
             collapsible: false,
             size: :xs,
@@ -12,7 +12,7 @@ module Coco
         end
 
         renders_one :secondary_nav, ->(**kwargs) do
-          Coco::App::Elements::ButtonGroup.new(
+          Coco::ButtonGroup.new(
             theme: :text_neutral_light,
             collapsible: false,
             size: :xs,

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

@@ -24,6 +24,10 @@
       .button-inner {
         @apply mx-0 px-4 py-3;
       }
+
+      .button-label {
+        @apply font-normal;
+      }
     }
 
     .nav-drawer-heading {

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

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

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

@@ -42,7 +42,7 @@
 @layer utilities {
   .app-sidebar-nav-horizontal-item {
     .nav-item-label {
-      @apply text-label-xxs mt-0.5;
+      @apply coco-label-xxs mt-0.5;
     }
 
     .nav-item-icon .coco-icon {
@@ -81,7 +81,7 @@
     @apply py-4;
 
     .nav-item-label {
-      @apply text-label-xxs mt-1;
+      @apply coco-label-xxs mt-1;
     }
 
     .nav-item-icon .coco-icon {
@@ -102,7 +102,7 @@
     @apply py-5;
 
     .nav-item-label {
-      @apply text-label-xs mt-1.5;
+      @apply coco-label-xs mt-1.5;
     }
 
     .nav-item-icon .coco-icon {

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

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

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

@@ -22,7 +22,7 @@
     }
 
     .menu-item-qualifier {
-      @apply ml-auto text-label-sm flex-none pl-4;
+      @apply ml-auto coco-label-sm flex-none pl-4;
     }
 
     .menu-item-select {
@@ -47,12 +47,12 @@
       }
 
       h4 {
-        @apply text-content-light-1 font-bold text-heading-6;
+        @apply text-content-light-1 font-bold coco-heading-6;
         grid-area: title;
       }
 
       div {
-        @apply text-para-sm;
+        @apply coco-para-sm;
         grid-area: text;
       }
     }

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

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

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

@@ -1,5 +1,5 @@
 import tokens from "@config/tokens.cjs";
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 
 const mobileMaxWidth = parseInt(tokens.app.screens.sm, 10);
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getData } from "@helpers/alpine";
 import { captureElementScreenshot } from "@helpers/screenshot";
 import { isDark } from "@helpers/color";

data/app/components/coco/app/elements/alert/alert.css

@@ -5,14 +5,14 @@
     .alert-container {
       @apply flex items-start px-4 py-2 relative;
     }
-
+    /* 
     .alert-icon {
       @apply flex items-center p-2 rounded-full;
 
       .coco-icon {
         @apply w-5 h-5;
       }
-    }
+    } */
 
     .alert-body {
       @apply pl-4 pr-2;
@@ -23,11 +23,11 @@
     }
 
     .alert-title {
-      @apply text-heading-6 font-bold;
+      @apply coco-heading-6 font-bold;
     }
 
     .alert-message {
-      @apply text-para-md;
+      @apply coco-para-md;
 
       a {
         @apply text-current;
@@ -58,6 +58,14 @@
       .alert-body {
         @apply @[1000px]:w-auto;
       }
+
+      .alert-stamp .coco-icon {
+        @apply text-content-light-1;
+      }
+
+      &[data-theme="warning-vivid"] .alert-stamp .coco-icon {
+        @apply text-content-dark-1;
+      }
     }
 
     /* Dismissable */
@@ -80,20 +88,16 @@
         @apply py-1.5;
       }
 
-      .alert-icon {
-        @apply p-0 !bg-transparent;
-      }
-
       .alert-body {
         @apply pl-3;
       }
 
       .alert-title {
-        @apply text-para-md sm:text-para-sm xl:text-para-md;
+        @apply coco-para-md sm:coco-para-sm xl:coco-para-md;
       }
 
       .alert-message {
-        @apply text-para-md sm:text-para-sm xl:text-para-md;
+        @apply coco-para-md sm:coco-para-sm xl:coco-para-md;
       }
     }
 
@@ -122,10 +126,6 @@
         @apply text-content-light-1;
       }
 
-      .alert-icon {
-        @apply text-content-light-1;
-      }
-
       .coco_link:not([data-theme]) {
         @apply app-link-neutral-light;
       }
@@ -133,26 +133,14 @@
 
     &[data-theme="positive"] {
       @apply bg-background-positive-light border-positive-300 hover:border-positive-400;
-
-      .alert-icon {
-        @apply text-content-positive bg-positive-200;
-      }
     }
 
     &[data-theme="positive-vivid"] {
       @apply bg-background-positive;
-
-      .alert-icon {
-        @apply bg-positive-700;
-      }
     }
 
     &[data-theme="warning"] {
       @apply bg-background-warning-light border-warning-300  hover:border-warning-400;
-
-      .alert-icon {
-        @apply text-content-warning bg-warning-100;
-      }
     }
 
     &[data-theme="warning-vivid"] {
@@ -162,10 +150,6 @@
         @apply text-content-dark-1;
       }
 
-      .alert-icon {
-        @apply bg-warning-600;
-      }
-
       .coco-link:not([data-theme]) {
         @apply app-link-neutral-dark;
       }
@@ -173,34 +157,18 @@
 
     &[data-theme="negative"] {
       @apply bg-background-negative-light border-negative-300 hover:border-negative-400;
-
-      .alert-icon {
-        @apply text-content-negative bg-negative-200;
-      }
     }
 
     &[data-theme="negative-vivid"] {
       @apply bg-background-negative;
-
-      .alert-icon {
-        @apply bg-negative-700;
-      }
     }
 
     &[data-theme="info"] {
       @apply bg-background-info-light border-info-300 hover:border-info-400;
-
-      .alert-icon {
-        @apply text-content-info bg-info-200;
-      }
     }
 
     &[data-theme="info-vivid"] {
       @apply bg-background-info;
-
-      .alert-icon {
-        @apply bg-info-700;
-      }
     }
   }
 }
@@ -224,7 +192,7 @@
         @apply py-3;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-1.5;
       }
 
@@ -249,7 +217,7 @@
           @apply items-center;
         }
 
-        .alert-icon {
+        .alert-stamp {
           @apply self-center;
         }
 
@@ -267,7 +235,7 @@
       @apply items-center py-2.5;
     }
 
-    .alert-icon {
+    .alert-stamp {
       @apply self-center;
     }
 
@@ -292,7 +260,7 @@
         @apply py-2;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-0;
       }
 

data/app/components/coco/app/elements/alert/alert.html.erb

@@ -9,8 +9,8 @@
   "vivid": vivid?
 }) do %>
   <div class="alert-container">
-    <div class="alert-icon" data-role="icon">
-      <%= icon %>  
+    <div class="alert-stamp" data-role="icon">
+      <%= stamp %>
     </div>
     
     <div class="alert-body">

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

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

data/app/components/coco/app/elements/alert/alert.rb

@@ -2,22 +2,11 @@ module Coco
   module App
     module Elements
       class Alert < Coco::Component
-        include Concerns::WithIcon
+        include Concerns::AcceptsOptions
         include Concerns::AcceptsTheme
 
         THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
 
-        THEME_ICONS = {
-          positive: :check_circle,
-          positive_vivid: :check_circle,
-          warning: :alert_triangle,
-          warning_vivid: :alert_triangle,
-          negative: :alert_circle,
-          negative_vivid: :alert_circle,
-          info: :info,
-          info_vivid: :info
-        }.freeze
-
         accepts_option :dismissable, from: [true, false], default: false
         accepts_option :dismiss_after_action, from: [true, false], default: true
         accepts_option :banner, from: [true, false], default: false
@@ -45,13 +34,9 @@ module Coco
         end
 
         before_render do
-          theme = get_option_value(:theme)
-
           unless tag_attr?(:id)
             set_tag_attr(:id, "alert-#{rand(1000)}")
           end
-
-          icon(name: THEME_ICONS[theme.tr("-", "_").to_sym])
         end
 
         def dismissable?
@@ -78,6 +63,16 @@ module Coco
         def button_size
           get_option_value(:condensed) ? :xs : :sm
         end
+
+        def stamp
+          type = unvividify(get_option_value(:theme))&.to_sym
+          style = if get_option_value(:banner)
+            :compact
+          else
+            vivid? ? :inverse : :subtle
+          end
+          coco_stamp(type, style:)
+        end
       end
     end
   end

data/app/components/coco/app/elements/color_picker/color_picker.css

@@ -110,7 +110,7 @@
     }
 
     .picker-display-input {
-      @apply text-para-sm h-9;
+      @apply coco-para-sm h-9;
     }
 
     .picker-display-color {
@@ -143,7 +143,7 @@
     }
 
     .picker-display-input {
-      @apply text-para-md h-11;
+      @apply coco-para-md h-11;
     }
 
     .picker-display-color {

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

@@ -1,5 +1,5 @@
 import iro from "@jaames/iro";
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { isValidHex, formatHex } from "@helpers/color";
 import { getComponent } from "@helpers/alpine";
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getData } from "@helpers/alpine";
 
 export default CocoComponent("appColorPickerButton", ({ selected }) => {

data/app/components/coco/app/elements/color_picker_button/color_picker_button.rb

@@ -7,7 +7,7 @@ module Coco
         include Coco::AppHelper
 
         wraps_component :button do |args|
-          Coco::App::Elements::Button.new(**args)
+          Coco::Button.new(**args)
         end
 
         renders_one :text, Coco::Content
@@ -44,8 +44,8 @@ module Coco
           @selected = selected
 
           @size = kwargs.fetch(:size, :default)&.to_sym
-          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          if @size.in?(Coco::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::Button::SIZE_ALIASES.fetch(@size)
           end
         end
 

data/app/components/coco/app/elements/confirm_panel/confirm_panel.css

@@ -4,7 +4,7 @@
     @apply px-5 py-4 text-center max-w-[200px] space-y-4;
 
     .confirm-text {
-      @apply text-label-sm font-semibold;
+      @apply coco-label-sm font-semibold;
     }
   }
 }

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

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

data/app/components/coco/app/elements/image_picker/image_picker.css

@@ -72,12 +72,12 @@
     }
 
     .picker-placeholder-text {
-      @apply text-para-sm;
+      @apply coco-para-sm;
       width: 148px;
     }
 
     .picker-file-name {
-      @apply text-label-sm;
+      @apply coco-label-sm;
     }
 
     .picker-actions {
@@ -94,12 +94,12 @@
     }
 
     .picker-placeholder-text {
-      @apply text-para-md;
+      @apply coco-para-md;
       width: 172px;
     }
 
     .picker-file-name {
-      @apply text-label-md;
+      @apply coco-label-md;
     }
 
     .picker-actions {

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getComponent } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getData } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 

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

@@ -7,7 +7,7 @@ module Coco
         include Coco::AppHelper
 
         wraps_component :button do |args|
-          Coco::App::Elements::Button.new(icon: :image_plus, **args)
+          Coco::Button.new(icon: :image_plus, **args)
         end
 
         renders_one :text, Coco::Content
@@ -35,8 +35,8 @@ module Coco
           @src = src
 
           @size = kwargs.fetch(:size, :default)&.to_sym
-          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          if @size.in?(Coco::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::Button::SIZE_ALIASES.fetch(@size)
           end
         end
 

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getData } from "@helpers/alpine";
 
 export default CocoComponent("appLayoutPickerButton", ({ selected }) => {

data/app/components/coco/app/elements/layout_picker_button/layout_picker_button.rb

@@ -9,7 +9,7 @@ module Coco
 
         wraps_component :button do |args|
           args[:class] = [args[:class], "layout-picker-trigger"]
-          Coco::App::Elements::Button.new(**args)
+          Coco::Button.new(**args)
         end
 
         renders_many :layouts, ->(name:, thumbnail:, **layout_options) do
@@ -24,8 +24,8 @@ module Coco
           @resize = {}
 
           @size = kwargs.fetch(:size, :default)&.to_sym
-          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          if @size.in?(Coco::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::Button::SIZE_ALIASES.fetch(@size)
           end
         end
 

data/app/components/coco/app/elements/link/link.rb

@@ -25,7 +25,7 @@ module Coco
         end
 
         class << self
-          include Coco::BaseHelper
+          include Coco::SharedHelper
         end
       end
     end

data/app/components/coco/app/elements/menu/menu.css

@@ -9,7 +9,7 @@
       }
 
       > .coco-button-wrapper > .coco-button,
-      > [data-component="app-button-to"] .coco-button,
+      > [data-component="button-to"] .coco-button,
       > [data-component="app-menu-button"]
         > .coco-button-wrapper
         > .coco-button {
@@ -34,8 +34,8 @@
       @apply py-1.5;
 
       .menu-item {
-        [data-component="app-button"] {
-          @apply px-4 py-2 text-label-sm;
+        [data-component="button"] {
+          @apply px-4 py-2 coco-label-sm;
 
           .button-inner {
             @apply gap-2;
@@ -52,8 +52,8 @@
       @apply py-2;
 
       .menu-item {
-        [data-component="app-button"] {
-          @apply px-5 py-2.5 text-label-md;
+        [data-component="button"] {
+          @apply px-5 py-2.5 coco-label-md;
 
           .button-inner {
             @apply gap-2;

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

@@ -1,4 +1,4 @@
-import { CocoComponent } from "@js/coco";
+import { CocoComponent } from "@assets/js/shared/coco";
 import { getComponent } from "@helpers/alpine";
 
 export default CocoComponent("appMenuButton", () => {

data/app/components/coco/app/elements/menu_button/menu_button.rb

@@ -9,11 +9,11 @@ module Coco
 
         wraps_component :button do |kwargs|
           @size = kwargs.fetch(:size, :default)&.to_sym
-          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          if @size.in?(Coco::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::Button::SIZE_ALIASES.fetch(@size)
           end
 
-          Coco::App::Elements::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **kwargs)
+          Coco::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **kwargs)
         end
 
         accepts_option :fit, from: [:auto, :full]

data/app/components/coco/app/elements/menu_items/user_profile/user_profile.css

@@ -16,7 +16,7 @@
     }
 
     .user-profile-email {
-      @apply text-gray-500 text-label-sm italic truncate;
+      @apply text-gray-500 coco-label-sm italic truncate;
     }
   }
 }

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

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

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

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

data/app/components/coco/app/elements/snackbar/snackbar.css

@@ -22,7 +22,7 @@
     }
 
     .snackbar-content {
-      @apply text-label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
+      @apply coco-label-md text-content-light-1 font-semibold flex-grow mr-2 my-2;
     }
 
     .coco-button {