coveragebook_components 0.16.0 → 0.17.0

data/app/components/coco/app/sidebar_nav/navbar/navbar.rb

@@ -1,50 +0,0 @@
-module Coco
-  module App
-    module SidebarNav
-      class Navbar < Coco::Component
-        include Coco::AppComponentsHelper
-
-        tag_name :nav
-        component_name :app_sidebar_nav
-
-        renders_many :actions, ->(label, href, icon:, **kwargs) do
-          actions_data << {label: label, href: href, icon: icon, **kwargs}
-        end
-
-        renders_many :items, types: {
-          link: ->(label, href, show_on_mobile: true, **kwargs, &block) do
-            nav_item(mobile: show_on_mobile) do
-              render Coco::App::SidebarNav::Item.new(label: label, href: href, **kwargs), &block
-            end
-          end,
-          menu: ->(label, show_on_mobile: true, **kwargs, &block) do
-            nav_item(mobile: show_on_mobile) do
-              render Coco::App::SidebarNav::Item.new(label: label, **kwargs) do |item|
-                item.with_menu(&block)
-              end
-            end
-          end
-        }
-
-        attr_reader :actions_data
-
-        def initialize(**)
-          @actions_data = []
-          @menus_data = {}
-        end
-
-        def nav_item(mobile: true, &block)
-          tag.div(class: "nav-item", data: {show_on_mobile: mobile.to_s}, &block)
-        end
-
-        def with_link(...)
-          with_item_link(...)
-        end
-
-        def with_menu(...)
-          with_item_menu(...)
-        end
-      end
-    end
-  end
-end

data/app/components/coco/app/slide_editor/slide_editor.css

@@ -1,149 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-slide-editor"] {
-    .editor-inputs {
-      @apply hidden;
-    }
-
-    .editor-toolbar {
-      @apply mb-4 xl:mb-6;
-    }
-
-    .editor-form form {
-      @apply hidden;
-    }
-
-    .slide-media {
-      @apply relative;
-    }
-
-    .editor-slide {
-      @apply shadow-md;
-
-      textarea {
-        @apply flex-none w-full;
-      }
-    }
-
-    .editor-foreground-image-uploader {
-      @apply h-full w-full relative;
-
-      .editor-foreground-image {
-        @apply h-full w-full relative transition-[outline-color] duration-100;
-
-        &:hover {
-          @apply outline outline-1 outline-transparent outline-offset-0;
-        }
-
-        img {
-          @apply w-full h-full object-contain;
-        }
-      }
-
-      .editor-image-upload-placeholder {
-        @apply inset-0 flex flex-col items-center justify-center text-center aspect-[4/3] @slide-fluid:aspect-auto @slide-fluid:absolute;
-        @apply outline outline-1 outline-transparent outline-offset-0;
-        background-color: rgba(255, 255, 255, 0.1);
-
-        .coco-icon {
-          @apply text-current;
-          width: 3em;
-          height: 3em;
-          margin-bottom: 0.6em;
-        }
-
-        .coco-icon,
-        .editor-image-upload-placeholder-text {
-          @apply opacity-50;
-        }
-      }
-
-      .editor-image-upload-toolbar {
-        @apply absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity duration-100;
-      }
-
-      &:hover .editor-image-upload-toolbar {
-        @apply opacity-100;
-      }
-    }
-
-    .coco-button.editor-saving {
-      @apply cursor-not-allowed;
-    }
-
-    .editor-thumbnail-wrapper {
-      @apply w-0 overflow-hidden relative;
-    }
-
-    .editor-thumbnail {
-      @apply absolute w-[780px] top-0 z-[-1000] pointer-events-none;
-    }
-
-    .editor-thumbnail-image {
-      @apply w-full h-full bg-contain bg-no-repeat bg-center;
-    }
-
-    .editor-icon-bg-color {
-      @apply stroke-content-dark-1 fill-current;
-      stroke-width: 2px;
-    }
-
-    .slide-title,
-    .slide-text {
-      @apply outline outline-1 outline-transparent outline-offset-0 transition-[outline-color] duration-100;
-
-      textarea::placeholder {
-        @apply italic;
-      }
-    }
-
-    .slide-bg-light {
-      .editor-foreground-image,
-      .editor-image-upload-placeholder {
-        outline-color: rgba(0, 0, 0, 0.3) !important;
-      }
-
-      .editor-image-upload-placeholder {
-        @apply text-content-dark-1;
-      }
-
-      .slide-title,
-      .slide-text {
-        &:hover,
-        &:focus {
-          outline-color: rgba(0, 0, 0, 0.3);
-        }
-      }
-
-      &[data-placeholders~="title"] [data-role="title"],
-      &[data-placeholders~="text1"] [data-role="text-primary"],
-      &[data-placeholders~="text2"] [data-role="text-secondary"] {
-        outline-color: rgba(0, 0, 0, 0.3) !important;
-      }
-    }
-
-    .slide-bg-dark {
-      .editor-foreground-image,
-      .editor-image-upload-placeholder {
-        outline-color: rgba(255, 255, 255, 0.3) !important;
-      }
-
-      .editor-image-upload-placeholder {
-        @apply text-content-light-1;
-      }
-
-      .slide-title,
-      .slide-text {
-        &:hover,
-        &:focus {
-          outline-color: rgba(255, 255, 255, 0.3);
-        }
-      }
-
-      &[data-placeholders~="title"] [data-role="title"],
-      &[data-placeholders~="text1"] [data-role="text-primary"],
-      &[data-placeholders~="text2"] [data-role="text-secondary"] {
-        outline-color: rgba(255, 255, 255, 0.3) !important;
-      }
-    }
-  }
-}

data/app/components/coco/app/slide_editor/slide_editor.html.erb

@@ -1,302 +0,0 @@
-<%= render component_tag(x: {
-  data: x_data("appSlideEditor", alpine_props),
-  ":class": "{ready}",
-  "undo": true
-}) do %>
-  <div class="editor-toolbar">
-    <%= coco_toolbar do |toolbar| %>
-      <% toolbar.with_section do |section| %>
-        <% if layout? %>
-          <% section.with_layout_picker_button(
-            icon: :layout_template,
-            selected: current_layout,
-            wrapper: {
-              data: {
-                role: "layout-picker"
-              },
-              x: {
-                modelable: "selectedLayout",
-                model: "layout"
-              }
-            }
-          ) do |button| %>
-            <% button.with_layout(name: "one-col-title", thumbnail: "slides/one-col-title-layout") %>
-            <% button.with_layout(name: "two-col-mixed", thumbnail: "slides/two-col-mixed-layout") %>
-            <% button.with_layout(name: "one-col-media", thumbnail: "slides/one-col-media-layout") %>
-            <% button.with_layout(name: "two-col-media", thumbnail: "slides/two-col-media-layout") %>
-            <% button.with_layout(name: "one-col-text", thumbnail: "slides/one-col-text-layout") %>
-            <% button.with_layout(name: "two-col-text", thumbnail: "slides/two-col-text-layout") %>
-
-            <%= tt("layout_picker.label") %>
-          <% end %>
-        <% end %>
-
-        <% if bg_color? %>
-          <% section.with_color_picker_button(
-            **@bg_color_options.to_h,
-            wrapper: {
-              data: {
-                role: "bg-color-picker"
-              },
-              x: {
-                modelable: "selectedColor",
-                model: "bgColor",
-                "@color-picker:change": "bgColor = $event.detail.color"
-              }
-            }
-          ) do |button| %>
-            <% button.with_picker %>
-            <% button.with_text { tt("bg_color_picker.label") } %>
-            <% button.with_icon do %>
-              <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="editor-icon-bg-color">
-                <path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"></path>
-              </svg>
-            <% end %>
-          <% end %>
-        <% end %>
-
-        <% if bg_image? %>
-          <% section.with_image_picker_button(
-            icon: :image_plus,
-            src: bg_image_src,
-            wrapper: {
-              data: {
-                role: "bg-image-picker"
-              },
-              x: {
-                "@image-picker:change": "bgImage = $event.detail.image",
-                modelable: "selectedImage",
-                model: "bgImage"
-              }
-            }
-          ) do |button| %>
-            <% button.with_picker do |picker| %>
-              <% picker.with_blank_state_text { tt("bg_image_picker.blank_state") } %>
-            <% end %>
-
-            <%= tt("bg_image_picker.label") %>
-          <% end %>
-        <% end %>
-
-        <% if text_color? %>
-          <% section.with_color_picker_button(
-            **@text_color_options.to_h,
-            wrapper: {
-              data: {
-                role: "text-color-picker"
-              },
-              x: {
-                "@color-picker:change": "textColor = $event.detail.color",
-                modelable: "selectedColor",
-                model: "textColor"
-              }
-            }
-          ) do |button| %>
-            <% button.with_picker %>
-            <% button.with_text { tt("text_color_picker.label") } %>
-            <% button.with_icon do %>
-              <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M4.99994 13.3333L9.99994 3.33334L14.9999 13.3333" stroke="#111827" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M6.66656 10H13.3332" stroke="#111827" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
-                <rect x="2.25" y="15.25" width="15.5" height="2.5" rx="1.25" fill="currentColor" stroke="#111827" stroke-width="0.5"/>
-              </svg>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-
-      <% toolbar.with_section do |section| %>
-        <% section.with_button(
-          icon: :undo_2,
-          click: "history.undo",
-          tooltip: tt("undo_button.tooltip"),
-          theme: :text_secondary,
-          disabled: true,
-          x: { "effect": "disabled = saving || !history.undoable" },
-          data: {
-            role: "undo"
-          }
-        ) %>
-
-        <% section.with_button(
-          icon: :redo_2,
-          click: "history.redo",
-          tooltip: tt("redo_button.tooltip"),
-          theme: :text_secondary,
-          disabled: true,
-          x: { "effect": "disabled = saving || !history.redoable" },
-          data: {
-            role: "redo"
-          }
-        ) %>
-        
-        <% section.with_button(
-          theme: :positive,
-          icon: :check,
-          collapsible: false,
-          disabled: true,
-          data: {
-            role: "save"
-          },
-          x: {
-            "@click.stop.prevent": "if(!saving) save()",
-            "effect": "loading = saving; disabled = !history.undoable",
-            ":class": "{'editor-saving': saving}"
-          }
-        ) do |button| %>
-          <% button.with_state(:loading, text: tt("save_button.saving_label")) %>
-          <%= tt("save_button.label") %>
-        <% end %>
-      <% end %>
-    <% end %> 
-  </div>
-  
-  <%# Editable slide %>
-  <div
-    class="editor-slide"
-    x-ref="slide"
-    @dragenter.stop.prevent="dragging = true"
-    @dragover.stop.prevent="dragging = true"
-    @dragleave.stop.prevent="dragging = false"
-    @drop.stop.prevent="handleImageDrop($event)"
-    @click="handleSlideClick">
-    <%= coco_editable_slide(
-      **slide_args,
-      data: {
-        role: "slide"
-      },
-      x: {
-        bind: "slide",
-        ":data-placeholders": "blankTextAreasList",
-      }
-    ) do |slide| %>
-      <% if title? %>
-        <% slide.with_title do %>
-          <%= title %>
-        <% end %>
-      <% end %>
-
-      <% if text_1? %>
-        <% slide.with_text_1 do %>
-          <%= text_1 %>
-        <% end %>
-      <% end %>
-
-      <% if text_2? %>
-        <% slide.with_text_2 do %>
-          <%= text_2 %>
-        <% end %>
-      <% end %>
-
-      <% if image_1? %>
-        <% slide.with_image_1 do %>
-          <%= render Coco::ImageUploader.new(
-            class: "editor-foreground-image-uploader",
-            x: {
-              "@image-uploader:load": "image1 = $event.detail.file"
-            }
-          ) do %>
-            <div class="editor-foreground-image" x-show="hasImage1">
-              <%= coco_button_group(
-                theme: :toolbar,
-                floating: true,
-                class: "editor-image-upload-toolbar"
-              ) do |group| %>
-                <% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image1 = {}; clear();"}) %>
-              <% end %>
-              <img :src="image1.data">
-            </div>
-            <div class="editor-image-upload-placeholder" x-show="!hasImage1">
-              <%= coco_icon(:image_plus) %>
-              <div class="editor-image-upload-placeholder-text">Add image</div>
-            </div>
-          <% end %>
-        <% end %>
-      <% end %>
-
-      <% if image_2? %>
-        <% slide.with_image_2 do %>
-          <%= render Coco::ImageUploader.new(
-            class: "editor-foreground-image-uploader",
-            x: {
-              "@image-uploader:load": "image2 = $event.detail.file"
-            }
-          ) do %>
-            <div class="editor-foreground-image" x-show="hasImage2">
-              <%= coco_button_group(
-                theme: :toolbar,
-                floating: true,
-                class: "editor-image-upload-toolbar"
-              ) do |group| %>
-                <% group.with_button(icon: :trash_2, tooltip: "remove image", x: {"@click.stop": "image2 = {}; clear();"}) %>
-              <% end %>
-              <img :src="image2.data">
-            </div>
-            <div class="editor-image-upload-placeholder" x-show="!hasImage2">
-              <%= coco_icon(:image_plus) %>
-              <div class="editor-image-upload-placeholder-text">Add image</div>
-            </div>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  </div>
- 
-  <% if generate_thumbnail? %>
-    <%# Slide used for thumbnail generation %>
-    <div class="editor-thumbnail-wrapper">
-      <div x-ref="thumbnail" class="editor-thumbnail">
-        <%= coco_editable_slide(
-          **slide_args,
-          data: {
-            role: "slide-thumbnail"
-          },
-          x: {
-            bind: "slide"
-          }
-        ) do |slide| %>
-          <% if title? %>
-            <% slide.with_title do %>
-              <span x-text="title"></span>
-            <% end %>
-          <% end %>
-
-          <% if text_1? %>
-            <% slide.with_text_1 do %>
-              <span x-html="text1.replace(/\n/g, '<br>')"></span>
-            <% end %>
-          <% end %>
-
-          <% if text_2? %>
-            <% slide.with_text_2 do %>
-              <span x-html="text2.replace(/\n/g, '<br>')"></span>
-            <% end %>
-          <% end %>
-
-          <% if image_1? %>
-            <% slide.with_image_1 do %>
-              <div class="editor-thumbnail-image" :style="image1.data && `background-image: url('${image1.data}')`"></div>
-            <% end %>
-          <% end %>
-
-          <% if image_2? %>
-            <% slide.with_image_2 do %>
-              <div class="editor-thumbnail-image" :style="image2.data && `background-image: url('${image2.data}')`"></div>
-            <% end %>
-          <% end %>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
-
-  <% if content %>
-    <div
-      class="editor-form"
-      x-ref="form"
-      @turbo:submit-end="submitEnd"
-      @turbo:fetch-request-error="submitError"
-      @direct-upload:error="directUploadError">
-      <%= content %>
-    </div>
-  <% end %>
-<% end %>