coveragebook_components 0.12.1 → 0.13.0

data/app/components/coco/app/slide_editor/slide_editor.rb

@@ -0,0 +1,114 @@
+module Coco
+  module App
+    class SlideEditor < Coco::Component
+      include Coco::AppComponentsHelper
+      include Coco::BookComponentsHelper
+      include Coco::FormatHelper
+
+      DEFAULT_LAYOUT = "one-col-title"
+
+      renders_one :title, ->(value = nil, **textarea_options) do
+        Coco::SeamlessTextarea.new(**textarea_options,
+          value: value,
+          multiline: false,
+          focus: true,
+          data: {role: "title-editor"},
+          x: {modelable: "value", model: "title"})
+      end
+
+      renders_one :text_1, ->(value = nil, **textarea_options) do
+        Coco::SeamlessTextarea.new(**textarea_options,
+          value: value,
+          multiline: true,
+          data: {role: "text-1-editor"},
+          x: {modelable: "value", model: "text1"})
+      end
+
+      renders_one :text_2, ->(value = nil, **textarea_options) do
+        Coco::SeamlessTextarea.new(**textarea_options,
+          value: value,
+          multiline: true,
+          data: {role: "text-2-editor"},
+          x: {modelable: "value", model: "text2"})
+      end
+
+      renders_one :image_1, ->(src = nil, **image_options) do
+        @image_1_options = {src: src, **image_options}
+      end
+
+      renders_one :image_2, ->(src = nil, **image_options) do
+        @image_2_options = {src: src, **image_options}
+      end
+
+      renders_one :bg_color, ->(value = nil, **input_options) do
+        @bg_color_options = {selected: value, **input_options}
+      end
+
+      renders_one :text_color, ->(value = nil, **input_options) do
+        @text_color_options = {selected: value, **input_options}
+      end
+
+      renders_one :bg_image, ->(src = nil, **input_options) do
+        @bg_image_options = {src: src, **input_options}
+      end
+
+      renders_one :layout, ->(value = DEFAULT_LAYOUT, **input_options) do
+        @layout_options = {selected: value&.to_s&.tr("_", "-"), **input_options}
+      end
+
+      def initialize(generate_thumbnail: true, **kwargs)
+        @generate_thumbnail = generate_thumbnail
+      end
+
+      def generate_thumbnail? = @generate_thumbnail
+
+      def slide_args
+        {
+          bg_image: bg_image_src,
+          bg_color_hex: bg_color_css,
+          text_color_hex: text_color_css,
+          layout: current_layout,
+          render_empty: true
+        }
+      end
+
+      def alpine_props
+        {
+          bg_color: bg_color_css,
+          text_color: text_color_css,
+          title: title&.value,
+          text_1: text_1&.value,
+          text_2: text_2&.value,
+          image_1: image_1_src,
+          image_2: image_2_src,
+          bg_image: bg_image_src,
+          layout: current_layout
+        }
+      end
+
+      def bg_color_css
+        @bg_color_options[:selected] if @bg_color_options
+      end
+
+      def text_color_css
+        @text_color_options[:selected] if @text_color_options
+      end
+
+      def bg_image_src
+        @bg_image_options[:src] if @bg_image_options
+      end
+
+      def image_1_src
+        @image_1_options[:src] if @image_1_options
+      end
+
+      def image_2_src
+        @image_2_options[:src] if @image_2_options
+      end
+
+      def current_layout
+        @layout_options&.fetch(:selected, DEFAULT_LAYOUT) || DEFAULT_LAYOUT
+      end
+    end
+  end
+end

data/app/components/coco/book/editable_slide/editable_slide.rb

@@ -0,0 +1,72 @@
+module Coco
+  module Book
+    class EditableSlide < Coco::Component
+      include Concerns::AcceptsOptions
+      include Coco::TagHelper
+      include Coco::FormatHelper
+
+      accepts_option :layout, from: %w[one-col-title one-col-text one-col-media two-col-text two-col-media two-col-mixed], default: "one-col-title"
+
+      renders_one :title,
+        ->(&block) do
+          @has_content = true
+          block.call
+        end
+
+      renders_one :text_1,
+        ->(&block) do
+          @has_content = true
+          block.call
+        end
+
+      renders_one :text_2,
+        ->(&block) do
+          @has_content = true
+          block.call
+        end
+
+      renders_one :image_1,
+        ->(src: nil, &block) do
+          @has_content = true
+          block ? block.call : tag.img(src: src)
+        end
+
+      renders_one :image_2,
+        ->(src: nil, &block) do
+          @has_content = true
+          block ? block.call : tag.img(src: src)
+        end
+
+      before_initialize do |kwargs|
+        if kwargs[:layout]
+          kwargs[:layout] = kwargs[:layout].to_s.tr("_", "-")
+          kwargs[:layout] = "one-col-title" if kwargs[:layout] == "basic" # handle legacy layout name
+        end
+
+        kwargs
+      end
+
+      attr_reader :bg_image, :text_color_hex, :bg_color_hex
+
+      def initialize(bg_image: nil, bg_color_hex: nil, text_color_hex: nil, render_empty: false, **kwargs)
+        @bg_image = bg_image
+        @bg_color_hex = bg_color_hex
+        @text_color_hex = text_color_hex
+        @has_content = false
+        @render_empty = render_empty
+      end
+
+      def render?
+        @has_content || bg_image.present? || @render_empty == true
+      end
+
+      def slide_styles
+        style_str({
+          background_color: format_css_hex_color(bg_color_hex),
+          color: format_css_hex_color(text_color_hex),
+          background_image: ("url('#{bg_image}')" if bg_image)
+        })
+      end
+    end
+  end
+end

data/app/components/coco/book/media_slide/media_slide.rb

@@ -0,0 +1,12 @@
+module Coco
+  module Book
+    class MediaSlide < Coco::Component
+      attr_reader :src, :alt
+
+      def initialize(src:, alt: nil, **kwargs)
+        @src = src
+        @alt = alt
+      end
+    end
+  end
+end

data/app/components/coco/{shared → buttons}/button/button.js

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

data/app/components/coco/{shared → buttons}/button/button.rb

@@ -63,7 +63,7 @@ module Coco
       content: ->(&block) { block.call },
       confirmation: ->(**kwargs) do
         set_option_value(:confirm, true)
-        Coco::App::Elements::ConfirmPanel.new(**kwargs)
+        Coco::ConfirmPanel.new(**kwargs)
       end
     }
 
@@ -257,7 +257,7 @@ module Coco
       end
     end
     class << self
-      include Coco::SharedHelper
+      include Coco::ModalHelper
     end
   end
 end

data/app/components/coco/{shared → buttons}/button/button_dropdown.js

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

data/app/components/coco/{shared → buttons}/button_group/button_group.js

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@assets/js/shared/coco.js";
+import { CocoComponent } from "@assets/js/base/coco.js";
 import { getComponent } from "@helpers/alpine";
-import { createSingleton } from "@assets/js/libs/tippy";
+import { createSingleton } from "@assets/js/base/tippy";
 
 export default CocoComponent("appButtonGroup", () => {
   return {

data/app/components/coco/{shared → buttons}/button_to/button_to.rb

@@ -15,7 +15,7 @@ module Coco
 
     %i[confirmation].each do |slot_name|
       renders_one slot_name, ->(**kwargs, &block) do
-        button.send("with_#{slot_name}".to_sym, **kwargs, &block)
+        button.send(:"with_#{slot_name}", **kwargs, &block)
       end
     end
 

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-color-picker-button"] {
+  [data-coco][data-component="color-picker-button"] {
     @apply contents;
 
     .picker-icon {
@@ -10,7 +10,7 @@
       @apply w-full h-full block rounded-full bg-white border border-gray-900;
     }
 
-    [data-component="app-color-picker"] {
+    [data-component="color-picker"] {
       @apply rounded-md;
     }
   }

data/app/components/coco/{app/elements → buttons}/color_picker_button/color_picker_button.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: x_data("appColorPickerButton", {selected: selected}),
+  data: x_data("colorPickerButton", {selected: selected}),
   "@dropdown:mount": "onDropdownMount"
 }) do %> 
   <div x-effect="$dispatch('color-picker:change', {color: selectedColor})">

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

@@ -1,7 +1,7 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 import { getData } from "@helpers/alpine";
 
-export default CocoComponent("appColorPickerButton", ({ selected }) => {
+export default CocoComponent("colorPickerButton", ({ selected }) => {
   selected = selected ? "#" + selected.replace("#", "") : "#FFFFFF";
   return {
     selectedColor: selected,

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

@@ -0,0 +1,53 @@
+module Coco
+  class ColorPickerButton < Coco::Component
+    include Concerns::WithDropdownOptions
+    include Concerns::WrapsComponent
+
+    wraps_component :button do |args|
+      Coco::Button.new(**args)
+    end
+
+    renders_one :text, Coco::Content
+
+    renders_one :picker, ->(picker = nil, **kwargs, &block) do
+      if picker.is_a?(Coco::ColorPicker)
+        picker
+      else
+        picker&.to_s.presence || Coco::ColorPicker.new(
+          size: @size,
+          resize: @resize,
+          selected: @selected,
+          **kwargs
+        )
+      end
+    end
+
+    renders_one :icon, ->(&block) do
+      tag.span class: "picker-icon", style: "color: #{@selected}", ":style": "{color: selectedColor}", &block
+    end
+
+    before_render do
+      with_picker(selected: @selected) unless picker?
+      unless icon?
+        with_icon do
+          tag.span class: "picker-button-color", ":style": "{backgroundColor: selectedColor}"
+        end
+      end
+    end
+
+    attr_reader :selected
+
+    def initialize(selected: nil, **kwargs)
+      @selected = selected
+
+      @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
+    end
+
+    def button_text
+      text || content
+    end
+  end
+end

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-confirm-panel"] {
+  [data-coco][data-component="confirm-panel"] {
     width: min-content;
     @apply px-5 py-4 text-center max-w-[200px] space-y-4;
 

data/app/components/coco/{app/elements → buttons}/confirm_panel/confirm_panel.html.erb

@@ -1,4 +1,4 @@
-<%= render component_tag(x: {data: "appConfirmPanel"}) do %>
+<%= render component_tag(x: {data: "confirmPanel"}) do %>
   <% if text? %>
     <div class="confirm-text">
       <%= text %>

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

@@ -1,6 +1,6 @@
-import { CocoComponent } from "@assets/js/shared/coco.js";
+import { CocoComponent } from "@assets/js/base/coco.js";
 
-export default CocoComponent("appConfirmPanel", () => {
+export default CocoComponent("confirmPanel", () => {
   return {
     confirm() {
       this.$dispatch("confirmation:confirm");

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

@@ -0,0 +1,19 @@
+module Coco
+  class ConfirmPanel < Coco::Component
+    renders_one :button, ->(**kwargs, &block) do
+      coco_button(theme: :negative, **kwargs, fit: :full, size: :sm, &block)
+    end
+
+    renders_one :cancel, ->(**kwargs, &block) do
+      coco_button(theme: :secondary, **kwargs, fit: :full, size: :sm, &block)
+    end
+
+    renders_one :text, Coco::Content
+
+    before_render do
+      unless button?
+        raise ArgumentError, "No confirmation button defined"
+      end
+    end
+  end
+end

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

@@ -1,8 +1,8 @@
 @layer components {
-  [data-coco][data-component="app-image-picker-button"] {
+  [data-coco][data-component="image-picker-button"] {
     @apply contents;
 
-    [data-component="app-image-picker"] {
+    [data-component="image-picker"] {
       @apply rounded-md;
     }
 

data/app/components/coco/{app/elements → buttons}/image_picker_button/image_picker_button.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: x_data("appImagePickerButton", {src: src}),
+  data: x_data("imagePickerButton", {src: src}),
   "@dropdown:mount": "onDropdownMount",
   effect: "$dispatch('image-picker:change', {image: selectedImage})"
 }) do %>

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

@@ -1,8 +1,8 @@
-import { CocoComponent } from "@assets/js/shared/coco";
+import { CocoComponent } from "@assets/js/base/coco";
 import { getData } from "@helpers/alpine";
 import { basename } from "@helpers/path";
 
-export default CocoComponent("appImagePickerButton", ({ src }) => {
+export default CocoComponent("imagePickerButton", ({ src }) => {
   return {
     selectedImage: {
       name: basename(src),

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

@@ -0,0 +1,44 @@
+module Coco
+  class ImagePickerButton < Coco::Component
+    include Concerns::WithDropdownOptions
+    include Concerns::WrapsComponent
+
+    wraps_component :button do |args|
+      Coco::Button.new(icon: :image_plus, **args)
+    end
+
+    renders_one :text, Coco::Content
+
+    renders_one :picker, ->(picker = nil, **kwargs, &block) do
+      if picker.is_a?(Coco::ImagePicker)
+        picker
+      else
+        picker&.to_s.presence || Coco::ImagePicker.new(
+          size: @size,
+          resize: @resize,
+          src: @src,
+          **kwargs
+        )
+      end
+    end
+
+    before_render do
+      with_picker(src: @src) unless picker?
+    end
+
+    attr_reader :src
+
+    def initialize(src: nil, **kwargs)
+      @src = src
+
+      @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
+    end
+
+    def button_text
+      text || content
+    end
+  end
+end

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-layout-picker-button"] {
+  [data-coco][data-component="layout-picker-button"] {
     @apply contents;
 
     .layout-picker {
@@ -21,52 +21,52 @@
     /* Sizes */
 
     .layout-picker[data-size="sm"] {
-      @apply app-layout-picker-sm;
+      @apply layout-picker-sm;
     }
 
     .layout-picker[data-size="md"] {
-      @apply app-layout-picker-md;
+      @apply layout-picker-md;
     }
 
     @media screen(md) {
       .layout-picker[data-size-md="sm"] {
-        @apply app-layout-picker-sm;
+        @apply layout-picker-sm;
       }
 
       .layout-picker[data-size-md="md"] {
-        @apply app-layout-picker-md;
+        @apply layout-picker-md;
       }
     }
 
     @media screen(lg) {
       .layout-picker[data-size-lg="sm"] {
-        @apply app-layout-picker-sm;
+        @apply layout-picker-sm;
       }
 
       .layout-picker[data-size-lg="md"] {
-        @apply app-layout-picker-md;
+        @apply layout-picker-md;
       }
     }
 
     @media screen(xl) {
       .layout-picker[data-size-xl="sm"] {
-        @apply app-layout-picker-sm;
+        @apply layout-picker-sm;
       }
 
       .layout-picker[data-size-xl="md"] {
-        @apply app-layout-picker-md;
+        @apply layout-picker-md;
       }
     }
   }
 }
 
 @layer utilities {
-  .app-layout-picker-sm {
+  .layout-picker-sm {
     width: 284px;
     @apply p-4 gap-4;
   }
 
-  .app-layout-picker-md {
+  .layout-picker-md {
     width: 380px;
     @apply p-6 gap-6;
   }

data/app/components/coco/{app/elements → buttons}/layout_picker_button/layout_picker_button.html.erb

@@ -1,5 +1,5 @@
 <%= render component_tag(x: {
-  data: x_data("appLayoutPickerButton", {selected: selected})
+  data: x_data("layoutPickerButton", {selected: selected})
 }) do %> 
   <div
     @layout-picker:selected="selectedLayout = $event.detail.layout"

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

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

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

@@ -0,0 +1,33 @@
+module Coco
+  class LayoutPickerButton < Coco::Component
+    include Concerns::AcceptsOptions
+    include Concerns::WithDropdownOptions
+    include Concerns::WrapsComponent
+
+    wraps_component :button do |args|
+      args[:class] = [args[:class], "layout-picker-trigger"]
+      Coco::Button.new(**args)
+    end
+
+    renders_many :layouts, ->(name:, thumbnail:, **layout_options) do
+      @layout_options << {name: name, thumbnail: thumbnail, **layout_options}
+    end
+
+    attr_reader :layout_options, :size, :resize
+
+    def initialize(selected: nil, **kwargs)
+      @selected = selected
+      @layout_options = []
+      @resize = {}
+
+      @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
+    end
+
+    def selected
+      @selected || @layout_options.first[:name]
+    end
+  end
+end

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-menu"] {
+  [data-coco][data-component="menu"] {
     width: fit-content;
     max-width: 240px;
 
@@ -10,9 +10,7 @@
 
       > .coco-button-wrapper > .coco-button,
       > [data-component="button-to"] .coco-button,
-      > [data-component="app-menu-button"]
-        > .coco-button-wrapper
-        > .coco-button {
+      > [data-component="menu-button"] > .coco-button-wrapper > .coco-button {
         @apply hover:bg-gray-blend-50 active:bg-gray-blend-100;
 
         .button-inner {

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

@@ -0,0 +1,37 @@
+module Coco
+  class Menu < Coco::Component
+    include Concerns::ActsAsButtonGroup
+    include Concerns::AcceptsOptions
+
+    accepts_option :size, from: [:xs, :sm, :md, nil], default: :sm
+
+    renders_many :htmls, ->(*args, **kwargs, &block) do
+      init_button_group
+      items << block.call
+    end
+
+    before_render do
+      args[:resize]&.each { set_tag_data_attr("size-#{_1}", _2) }
+    end
+
+    def button_kwargs(kwargs, type = nil)
+      btn_kwargs = {
+        theme: nil,
+        size: get_option_value(:size),
+        resize: args[:resize],
+        **kwargs,
+        fit: :full,
+        collapsible: false
+      }
+
+      if type == :menu
+        btn_kwargs[:toggle] = :horizontal
+        btn_kwargs[:dropdown] ||= {
+          placement: "right-start"
+        }
+      end
+
+      btn_kwargs
+    end
+  end
+end

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-coco][data-component="app-menu-button"] {
+  [data-coco][data-component="menu-button"] {
     @apply contents;
 
     &[data-fit="full"] {

data/app/components/coco/{app/elements → buttons}/menu_button/menu_button.html.erb

@@ -1,4 +1,4 @@
-<%= render component_tag(x: {data: "appMenuButton"}) do %>
+<%= render component_tag(x: {data: "menuButton"}) do %>
   <%= render button do |btn| %>
     <% if icon? %>
       <% btn.with_icon do %>

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

@@ -0,0 +1,6 @@
+import { CocoComponent } from "@assets/js/base/coco";
+import { getComponent } from "@helpers/alpine";
+
+export default CocoComponent("menuButton", () => {
+  return {};
+});