coveragebook_components 0.12.1 → 0.13.0

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

@@ -0,0 +1,30 @@
+module Coco
+  class MenuButton < Coco::Component
+    include Concerns::AcceptsOptions
+    include Concerns::WithIcon
+    include Concerns::WrapsComponent
+
+    wraps_component :button do |kwargs|
+      @size = kwargs.fetch(:size, :default)&.to_sym
+      if @size.in?(Coco::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+        @size, @resize = Coco::Button::SIZE_ALIASES.fetch(@size)
+      end
+
+      Coco::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **kwargs)
+    end
+
+    accepts_option :fit, from: [:auto, :full]
+
+    renders_one :text, Coco::Content
+
+    renders_one :menu, ->(**kwargs) do
+      Coco::Menu.new(size: @size, resize: @resize, **kwargs)
+    end
+
+    attr_reader :size, :resize
+
+    def button_text
+      text || content
+    end
+  end
+end

data/app/components/coco/{app/elements → buttons}/menu_items/user_profile/user_profile.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-user-profile"] {
+  [data-coco][data-component="user-profile-menu-item"] {
     @apply px-4 py-1.5 grid grid-rows-1 gap-3;
     grid-template-columns: min-content 1fr;
 

data/app/components/coco/buttons/menu_items/user_profile/user_profile.rb

@@ -0,0 +1,18 @@
+module Coco
+  module MenuItems
+    class UserProfile < Coco::Component
+      component_name :user_profile_menu_item
+
+      renders_one :avatar, ->(**kwargs) do
+        Coco::Avatar.new(name: name, **kwargs, size: :lg)
+      end
+
+      attr_reader :name, :email
+
+      def initialize(name:, email:, **)
+        @name = name
+        @email = email
+      end
+    end
+  end
+end

data/app/components/coco/{app/elements → buttons}/option_bar/option_bar.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-option-bar"] {
+  [data-coco][data-component="option-bar"] {
     @apply border border-gray-transparent-100 p-1 bg-gray-transparent-50;
 
     border-radius: 44px;

data/app/components/coco/buttons/option_bar/option_bar.rb

@@ -0,0 +1,13 @@
+module Coco
+  class OptionBar < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, from: [:sm, :md], default: :sm
+
+    renders_many :options, ->(*args, selected: false, **kwargs, &block) do
+      theme = selected ? :neutral_light : :blank
+      size = get_option_value(:size)
+      coco_button(*args, **kwargs, theme:, size:, class: ("selected" if selected), &block)
+    end
+  end
+end

data/app/components/coco/{app/elements → buttons}/toolbar/toolbar.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-toolbar"] {
+  [data-coco][data-component="toolbar"] {
     .toolbar-sections {
       @apply flex items-center gap-x-2;
     }

data/app/components/coco/{app/elements → buttons}/toolbar/toolbar.js

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

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

@@ -0,0 +1,35 @@
+module Coco
+  class Toolbar < Coco::Component
+    renders_many :sections,
+      ->(*args, align: nil, **kwargs, &block) do
+        alignment = if align.nil?
+          @sections[:start].nil? ? :start : :end
+        else
+          align
+        end.to_sym
+
+        unless @sections[alignment].nil?
+          raise "Toolbar already has a `#{alignment}` section defined"
+        end
+
+        component = Coco::ButtonGroup.new(**kwargs, theme: :toolbar, collapsible: true)
+        @sections[alignment] = view_context.render(component, &block)
+      end
+
+    def initialize(**kwargs)
+      @sections = {
+        start: nil,
+        end: nil
+      }
+      super(**kwargs)
+    end
+
+    def start_section
+      @sections[:start]
+    end
+
+    def end_section
+      @sections[:end]
+    end
+  end
+end

data/app/components/coco/component.rb

@@ -3,7 +3,7 @@ module Coco
     include Concerns::AcceptsTagAttributes
     include Concerns::HasName
     include Concerns::Translatable
-    include Coco::ComponentHelper
+    include Coco::CoreComponentsHelper
     include Coco::AlpineHelper
 
     def accepts_options?

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

@@ -2,14 +2,12 @@ module Coco
   module Concerns
     module ActsAsButtonGroup
       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"
+        menu: "Coco::MenuButton",
+        color_picker: "Coco::ColorPickerButton",
+        layout_picker: "Coco::LayoutPickerButton",
+        image_picker: "Coco::ImagePickerButton"
       }
 
       included do
@@ -18,7 +16,6 @@ module Coco
           divider: ->(**kwargs) { tag.div(class: "divider") },
           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) }
@@ -64,10 +61,6 @@ module Coco
         with_item_layout_picker_button(...)
       end
 
-      def with_dropdown_button(...)
-        with_item_dropdown_button(...)
-      end
-
       private
 
       def button_kwargs(kwargs, type = nil)

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

@@ -7,7 +7,7 @@ module Coco
       def set_html_options!
         @html_options[:data] ||= {}
         @html_options[:data][:coco] = "✔"
-        @html_options[:data][:component] = "app-form-#{component_name.delete_prefix("app-")}"
+        @html_options[:data][:component] = "form-#{component_name.delete_prefix("fields-")}"
         super
       end
     end

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

@@ -3,12 +3,12 @@ module Coco
     module ActsAsFieldWithOptions
       extend ActiveSupport::Concern
       include Concerns::HasName
-      include AppHelper
+      include AppComponentsHelper
 
       def combine_options!
         @options[:data] ||= {}
         @options[:data][:coco] = "✔"
-        @options[:data][:component] = "app-form-#{component_name.delete_prefix("app-")}"
+        @options[:data][:component] = "form-#{component_name.delete_prefix("fields-")}"
         super
       end
     end

data/app/components/coco/embeds/youtube_embed/youtube_embed.rb

@@ -0,0 +1,16 @@
+module Coco
+  class YoutubeEmbed < Coco::Component
+    def initialize(url:, **kwargs)
+      @url = url
+    end
+
+    def video_id
+      youtube_url = /youtube.com\/(watch\?v=|v\/)([^&]+)/.match(@url)
+      youtube_url[2] if youtube_url
+    end
+
+    def src
+      "https://www.youtube.com/embed/#{video_id}"
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+module Coco
+  module Fields
+    class ButtonComponent < ViewComponent::Form::ButtonComponent
+      include Concerns::ActsAsFieldWithOptions
+      include Coco::CoreComponentsHelper
+
+      def call
+        coco_button(**options) do
+          content || value
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class CheckBoxComponent < ViewComponent::Form::CheckBoxComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class CollectionCheckBoxesComponent < ViewComponent::Form::CollectionCheckBoxesComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class CollectionRadioButtonsComponent < ViewComponent::Form::CollectionRadioButtonsComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class CollectionSelectComponent < ViewComponent::Form::CollectionSelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class ColorFieldComponent < ViewComponent::Form::ColorFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class DateFieldComponent < ViewComponent::Form::DateFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class DateSelectComponent < ViewComponent::Form::DateSelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class DatetimeLocalFieldComponent < ViewComponent::Form::DatetimeLocalFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class DatetimeSelectComponent < ViewComponent::Form::DatetimeSelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class EmailFieldComponent < ViewComponent::Form::EmailFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class ErrorMessageComponent < ViewComponent::Form::ErrorMessageComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class FileFieldComponent < ViewComponent::Form::FileFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class GroupedCollectionSelectComponent < ViewComponent::Form::GroupedCollectionSelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class HintComponent < ViewComponent::Form::HintComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class LabelComponent < ViewComponent::Form::LabelComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class MonthFieldComponent < ViewComponent::Form::MonthFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class NumberFieldComponent < ViewComponent::Form::NumberFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class PasswordFieldComponent < ViewComponent::Form::PasswordFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class RadioButtonComponent < ViewComponent::Form::RadioButtonComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class RangeFieldComponent < ViewComponent::Form::RangeFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class SearchFieldComponent < ViewComponent::Form::SearchFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class SelectComponent < ViewComponent::Form::SelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+module Coco
+  module Fields
+    class SubmitComponent < ViewComponent::Form::SubmitComponent
+      include Concerns::ActsAsFieldWithOptions
+      include Coco::CoreComponentsHelper
+
+      def call
+        coco_button(**options, type: :submit) do
+          content || value
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class TelephoneFieldComponent < ViewComponent::Form::TelephoneFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class TextAreaComponent < ViewComponent::Form::TextAreaComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class TextFieldComponent < ViewComponent::Form::TextFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class TimeFieldComponent < ViewComponent::Form::TimeFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class TimeSelectComponent < ViewComponent::Form::TimeSelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class TimeZoneSelectComponent < ViewComponent::Form::TimeZoneSelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class UrlFieldComponent < ViewComponent::Form::UrlFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class WeekFieldComponent < ViewComponent::Form::WeekFieldComponent
+      include Concerns::ActsAsFieldWithOptions
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Coco
+  module Fields
+    class WeekdaySelectComponent < ViewComponent::Form::WeekdaySelectComponent
+      include Concerns::ActsAsFieldWithHtmlOptions
+    end
+  end
+end

data/app/components/coco/{shared → images}/icon/icon.js

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

data/app/components/coco/{shared → images}/image_uploader/image_uploader.js

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

data/app/components/coco/{app/elements → indicators}/stamp/stamp.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-stamp"] {
+  [data-coco][data-component="stamp"] {
     &:not([data-style="compact"]) {
       @apply rounded-full relative;
 

data/app/components/coco/indicators/stamp/stamp.rb

@@ -0,0 +1,25 @@
+module Coco
+  class Stamp < Coco::Component
+    include Concerns::AcceptsOptions
+    include Concerns::AcceptsTheme
+
+    THEMES = [
+      "positive",
+      "negative",
+      "warning",
+      "info"
+    ]
+
+    DEFAULT_THEME = "info"
+
+    accepts_option :size, from: %i[xs sm md lg], default: :md
+    accepts_option :style, from: %i[subtle vivid inverse compact], default: :subtle
+    accepts_option :theme, from: THEMES, default: DEFAULT_THEME
+
+    attr_reader :icon_name
+
+    def initialize(icon:, **kwargs)
+      @icon_name = icon
+    end
+  end
+end

data/app/components/coco/{app/layouts → layout}/page/page.css

@@ -5,10 +5,13 @@
     }
 
     .page-controls {
-      @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between;
-
+      @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between pointer-events-none;
       left: var(--sidebar-nav-width, 0);
 
+      > * {
+        @apply pointer-events-auto;
+      }
+
       .page-control-next {
         @apply ml-auto;
       }

data/app/components/coco/{app/layouts → layout}/page/page.js

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