coveragebook_components 0.10.0 → 0.10.1.beta.0

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

@@ -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;
@@ -93,11 +93,11 @@
       }
 
       .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;
       }
     }
 

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/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 {

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

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

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

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

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

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

data/app/components/coco/app/elements/toolbar/toolbar.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("appToolbar", () => {

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

@@ -16,7 +16,7 @@ module Coco
               raise "Toolbar already has a `#{alignment}` section defined"
             end
 
-            component = Coco::App::Elements::ButtonGroup.new(**kwargs, theme: :toolbar, collapsible: true)
+            component = Coco::ButtonGroup.new(**kwargs, theme: :toolbar, collapsible: true)
             @sections[alignment] = view_context.render(component, &block)
           end
 

data/app/components/coco/app/fields/button_component.rb

@@ -3,7 +3,7 @@ module Coco
     module Fields
       class ButtonComponent < ViewComponent::Form::ButtonComponent
         include Concerns::ActsAsFieldWithOptions
-        include Coco::AppHelper
+        include Coco::SharedHelper
 
         def call
           coco_button(**options) do

data/app/components/coco/app/fields/submit_component.rb

@@ -3,6 +3,7 @@ module Coco
     module Fields
       class SubmitComponent < ViewComponent::Form::SubmitComponent
         include Concerns::ActsAsFieldWithOptions
+        include Coco::SharedHelper
 
         def call
           coco_button(**options, type: :submit) do

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

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

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

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