coveragebook_components 0.5.1 → 0.5.3

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

@@ -18,7 +18,7 @@
             }
           ) do |button| %>
             <% button.with_picker %>
-            <% button.with_text { "Background colour" } %>
+            <% 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>
@@ -41,12 +41,10 @@
             }
           ) do |button| %>
             <% button.with_picker do |picker| %>
-              <% picker.with_blank_state_text do %>
-                Drag a jpg, png or gif onto the slide area or&hellip;
-              <% end %>
+              <% picker.with_blank_state_text { tt("bg_image_picker.blank_state") } %>
             <% end %>
 
-            Background image
+            <%= tt("bg_image_picker.label") %>
           <% end %>
         <% end %>
 
@@ -63,9 +61,9 @@
             }
           ) do |button| %>
             <% button.with_picker %>
-            <% button.with_text { "Text colour" } %>
+            <% 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" class="editor-icon-text-color">
+              <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"/>
@@ -79,7 +77,7 @@
         <% section.with_button(
           icon: :undo_2,
           click: "history.undo",
-          tooltip: "Undo",
+          tooltip: tt("undo_button.tooltip"),
           theme: :text_secondary,
           disabled: true,
           x: { "effect": "disabled = saving || !history.undoable" },
@@ -91,7 +89,7 @@
         <% section.with_button(
           icon: :redo_2,
           click: "history.redo",
-          tooltip: "Redo",
+          tooltip: tt("redo_button.tooltip"),
           theme: :text_secondary,
           disabled: true,
           x: { "effect": "disabled = saving || !history.redoable" },
@@ -104,19 +102,18 @@
           theme: :positive,
           icon: :check,
           collapsible: false,
-          type: "submit",
           disabled: true,
           data: {
             role: "save"
           },
           x: {
-            "@click.stop.prevent": "if(!loading) save()",
+            "@click.stop.prevent": "if(!saving) save()",
             "effect": "loading = saving; disabled = !history.undoable",
             ":class": "{'editor-saving': saving}"
           }
         ) do |button| %>
-          <% button.with_state(:loading, text: "Saving...") %>
-          Save
+          <% button.with_state(:loading, text: tt("save_button.saving_label")) %>
+          <%= tt("save_button.label") %>
         <% end %>
       <% end %>
     <% end %> 
@@ -136,8 +133,7 @@
         role: "slide"
       },
       x: {
-        ":style": "slideStyles",
-        ":class": "slideClasses",
+        bind: "slide"
       }
     ) do |slide| %>
       <% if title? %>
@@ -153,24 +149,20 @@
       <% end %>
     <% end %>
   </div>
-
-  <% if content %>
-    <div
-      class="editor-form"
-      x-ref="form"
-      @turbo:submit-end="submitSuccess"
-      @turbo:fetch-request-error="submitError"
-      @direct-upload:error="directUploadError"
-      @direct-uploads:end="save">
-      <%= content %>
-    </div>
-  <% end %>
  
-  <% if false && thumbnail? %>
+  <% if generate_thumbnail? %>
     <%# Slide used for thumbnail generation %>
-    <div class="editor-screenshot-wrapper">
-      <div x-ref="screenshot" class="editor-screenshot">
-        <%= coco_editable_slide(**slide_args) do |slide| %>
+    <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>
@@ -187,4 +179,14 @@
     </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 %>

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

@@ -5,13 +5,6 @@ import { isDark } from "@helpers/color";
 import { wasSuccessful } from "@helpers/turbo_events";
 import { withUndo } from "@js/base/mixins";
 
-const thumbnailOpts = {
-  canvasWidth: 800,
-  canvasHeight: 500,
-  quality: 0.7,
-  pixelRatio: 1,
-};
-
 export default CocoComponent("appSlideEditor", (data) => {
   const initialData = {
     layout: data.layout,
@@ -44,9 +37,6 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     init() {
-      // Update thumbnail field when new thumbnail is generated
-      this.$watch("thumbnailFile", () => this._syncThumbnailField());
-
       this.$watch("errors", (errors) => {
         errors.forEach((error) => console.error(error.message)); // TODO display errors properly!
       });
@@ -82,67 +72,76 @@ export default CocoComponent("appSlideEditor", (data) => {
     },
 
     async save() {
-      this.errors.length = 0;
+      this.clearErrors();
       this.saving = true;
 
-      if (this.shouldGenerateThumbnail) {
+      if (this.$refs.thumbnail) {
         try {
           await this._generateThumbnail();
         } catch (error) {
           this.thumbnailFile = null;
           message = error.message || "Error generating slide thumbnail";
-          this._handleSaveError(message, { error });
+          this.handleSaveError(message, { error });
           return;
         }
       }
 
-      if (this.$refs.form) {
-        this.$refs.form.querySelector("form").requestSubmit();
+      const form = this.$refs.form && this.$refs.form.querySelector("form");
+
+      if (form && form.dataset.submit !== "false") {
+        const submitButton = form.querySelector("[type='submit']");
+        if (submitButton) {
+          submitButton.click();
+        } else {
+          this.handleSaveError("Slide form is missing a submit button");
+        }
       } else {
         this.submitSuccess();
       }
     },
 
-    submitEnd(event) {
-      handler = wasSuccessful(event) ? "submitSuccess" : "submitError";
-      this[handler](event);
+    submitEnd($event) {
+      this[wasSuccessful($event) ? "submitSuccess" : "submitError"]($event);
     },
 
-    submitSuccess() {
+    submitSuccess($event) {
       this.history.clear();
       this._fields.forEach((name) => (this.saved[name] = this[name]));
       this.saving = false;
 
-      console.info("Custom slide saved");
+      console.info("Slide changes saved");
       this.$dispatch("slide:save-end", { success: true });
     },
 
     submitError($event) {
-      message = "Error saving slide";
-      this._handleSaveError(message, { event: $event });
+      const message = "Error saving slide - form could not be submitted";
+      this.handleSaveError(message, { event: $event });
     },
 
     directUploadError($event) {
-      $event.preventDefault();
-      this._handleSaveError($event.detail.error, { event: $event });
+      $event.preventDefault(); // prevent generic alert dialog error
+
+      const message = $event.detail.error || "Error uploading file to storage";
+      this.handleSaveError(message, { event: $event });
     },
 
-    syncImageField(el, image) {
-      const dataTransfer = new DataTransfer();
-      if (image.file && image.file instanceof File) {
-        dataTransfer.items.add(image.file);
-      }
-      el.files = dataTransfer.files;
+    handleSaveError(message = "Error saving slide", context = {}) {
+      this.errors.push({ message, context });
+      this.saving = false;
+
+      this.$dispatch("slide:save-end", { success: false });
     },
 
-    input: {
-      layout: { "x-model.fill": "layout" },
-      title: { "x-model.fill": "title" },
-      text1: { "x-model.fill": "text1" },
-      bgColor: { "x-model.fill": "bgColorHex" },
-      textColor: { "x-model.fill": "textColorHex" },
-      bgImage: { "x-effect": "syncImageField($el, bgImage)" },
-      bgImagePurge: { ":checked": "!hasBgImage" },
+    clearErrors() {
+      this.errors.length = 0;
+    },
+
+    syncFileInput(input, file) {
+      const dataTransfer = new DataTransfer();
+      if (file && file instanceof File) {
+        dataTransfer.items.add(file);
+      }
+      input.files = dataTransfer.files;
     },
 
     get hasBgImage() {
@@ -157,48 +156,18 @@ export default CocoComponent("appSlideEditor", (data) => {
       return this.textColor.replace("#", "");
     },
 
-    get slideStyles() {
-      return {
-        backgroundColor: this.bgColor,
-        color: this.textColor,
-        backgroundImage: this.hasBgImage
-          ? `url('${this.bgImage.data}')`
-          : "none",
-      };
-    },
-
-    get slideClasses() {
-      return {
-        "slide-bg-dark": this.isDarkBg,
-        "slide-bg-light": !this.isDarkBg,
-      };
-    },
-
     get isDarkBg() {
       return this.hasBgImage || this.bgColor ? isDark(this.bgColor) : false;
     },
 
-    get shouldGenerateThumbnail() {
-      return !!this.$refs.thumbnail;
-    },
-
     get _fields() {
       return Object.keys(initialData);
     },
 
     async _generateThumbnail() {
-      const screenshotSlide = this.$refs.screenshot.firstElementChild;
-
-      // The HTML-to-image library didn't like these styles being dynamically
-      // bound in the usual Alpine way so we have to manually apply them instead.
-      for (const [key, value] of Object.entries(this.slideStyles)) {
-        screenshotSlide.style[key] = value;
-      }
-
       this.thumbnailFile = await captureElementScreenshot(
-        screenshotSlide,
-        "slide-thumbnail",
-        thumbnailOpts
+        this.$refs.thumbnail.firstElementChild,
+        "slide-thumbnail"
       );
 
       console.info(
@@ -207,25 +176,35 @@ export default CocoComponent("appSlideEditor", (data) => {
       );
     },
 
-    // Called whenever a new thumbnail is generated,
-    // adds the thumbnail file to the hidden thumbnail file
-    // input upload field.
-    _syncThumbnailField() {
-      const dataTransfer = new DataTransfer();
-      if (this.thumbnailFile instanceof File) {
-        dataTransfer.items.add(this.thumbnailFile);
-      }
-      this.$refs.thumbnail.files = dataTransfer.files;
-    },
+    /* bindings */
 
-    _handleSaveError(message = "Error saving slide", context = {}) {
-      this.errors.push({ message, context });
-      this.errors.forEach((err) => {
-        console.log(err.message);
-      });
-      this.saving = false;
+    slide: {
+      [":style"]() {
+        return {
+          backgroundColor: this.bgColor,
+          color: this.textColor,
+          backgroundImage: this.hasBgImage
+            ? `url('${this.bgImage.data}')`
+            : "none",
+        };
+      },
+      [":class"]() {
+        return {
+          "slide-bg-dark": this.isDarkBg,
+          "slide-bg-light": !this.isDarkBg,
+        };
+      },
+    },
 
-      this.$dispatch("slide:save-end", { success: false });
+    input: {
+      layout: { "x-model.fill": "layout" },
+      title: { "x-model.fill": "title" },
+      text1: { "x-model.fill": "text1" },
+      bgColor: { "x-model.fill": "bgColorHex" },
+      textColor: { "x-model.fill": "textColorHex" },
+      bgImage: { "x-effect": "syncFileInput($el, bgImage.file)" },
+      bgImagePurge: { ":checked": "!hasBgImage" },
+      thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" },
     },
   };
 });

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

@@ -6,8 +6,6 @@ module Coco
         include Coco::BookHelper
         include Coco::FormatHelper
 
-        renders_one :form
-
         renders_one :title, ->(value = nil, **textarea_options) do
           Coco::App::Elements::SeamlessTextarea.new(**textarea_options,
             value: value,
@@ -37,9 +35,11 @@ module Coco
           @bg_image_options = {src: src, **input_options}
         end
 
-        # renders_one :thumbnail, ->(name: :thumbnail_image, **input_options) do
-        #   add_field(:thumbnail, name, input_options)
-        # end
+        def initialize(generate_thumbnail: true, **kwargs)
+          @generate_thumbnail = generate_thumbnail
+        end
+
+        def generate_thumbnail? = @generate_thumbnail
 
         def slide_args
           {

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

@@ -6,7 +6,7 @@
       @apply transition-all overflow-hidden;
       border-radius: 44px;
 
-      .button-content {
+      & > .button-element .button-content {
         @apply font-semibold;
       }
     }
@@ -23,7 +23,7 @@
         @apply bg-primary-700;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -44,7 +44,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -65,7 +65,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -86,7 +86,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-positive-300;
       }
 
@@ -106,7 +106,7 @@
         @apply bg-negative-800;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-negative-300;
       }
 
@@ -126,7 +126,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-negative-300;
       }
 
@@ -146,7 +146,7 @@
         @apply bg-warning-800;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-warning-300;
       }
 
@@ -166,7 +166,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-warning-300;
       }
 
@@ -186,7 +186,7 @@
         @apply bg-info-800;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-info-300;
       }
 
@@ -206,7 +206,7 @@
         @apply bg-gray-blend-100;
       }
 
-      &[data-state="loading"] .button-icon {
+      &[data-state="loading"] > .button-element .button-icon {
         @apply text-info-300;
       }
 

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

@@ -7,14 +7,14 @@ module Coco
 
         DEFAULT_SWATCHES = [
           {color: "#111827"},
+          {color: "#F3F4F6"},
           {color: "#FFFFFF"},
-          {color: "#E78188"},
-          {color: "#D50201"},
-          {color: "#FC5C0E"},
           {color: "#FEC878"},
-          {color: "#F5EEE6"},
-          {color: "#C1DAA9"},
+          {color: "#FC5C0E"},
+          {color: "#D50201"},
           {color: "#1A8871"},
+          {color: "#C1DAA9"},
+          {color: "#F5EEE6"},
           {color: "#91C7E1"},
           {color: "#0164FF"},
           {color: "#3A2D86"}

data/app/components/coco/base/button/button.css

@@ -41,7 +41,7 @@
 
     /* loading */
 
-    &[data-state="loading"] .button-icon {
+    &[data-state="loading"] > .button-element .button-icon {
       @apply animate-spin;
     }
 
@@ -53,7 +53,7 @@
 
     /* Icons */
 
-    &[data-icon-position="end"] {
+    &[data-icon-position="end"] > .button-element {
       .button-content {
         @apply order-1;
       }
@@ -67,7 +67,7 @@
       }
     }
 
-    &.with-icon[data-collapsed="true"] {
+    &.with-icon[data-collapsed="true"] > .button-element {
       .button-content {
         display: none;
       }

data/app/components/coco/base/button/button.html.erb

@@ -24,7 +24,7 @@
               class="button-icon"
               x-ref="<%= name %>Icon"
               x-show="showIcon('<%= name %>')"
-              <%= "x-cloak" unless name == :default %>>
+              <%= "x-cloak" unless name.to_sym == :default %>>
               <%= props[:icon] %>
             </span>
           <% else %>
@@ -42,7 +42,7 @@
               class="button-content"
               x-ref="<%= name %>Content"
               x-show="showContent('<%= name %>')"
-              <%= "x-cloak" unless name == :default %>>
+              <%= "x-cloak" unless name.to_sym == :default %>>
               <%= props[:text] %>
             </span>
           <% else %>

data/app/components/coco/base/button/button.js

@@ -31,11 +31,8 @@ export default CocoComponent("button", (data = {}) => {
           return;
         }
 
-        this.setTooltipText();
         this.$root.setAttribute("data-collapsed", collapsed ? "true" : "false");
       });
-
-      this.$watch("$options.state", () => this.setTooltipText());
     },
 
     setTooltipText() {
@@ -178,6 +175,7 @@ export default CocoComponent("button", (data = {}) => {
     root: {
       "x-options": "options",
       "x-tooltip": "tooltipText",
+      "x-effect": "setTooltipText",
       "@confirmation:confirm": "approveAndRun",
       "@confirmation:cancel": "cancelConfirmation",
       "@dropdown:show": "setState('active')",

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

@@ -32,7 +32,7 @@ module Coco
           end
 
           def render?
-            @has_content || @render_empty == true
+            @has_content || bg_image.present? || @render_empty == true
           end
 
           def slide_styles

data/app/components/coco/component.rb

@@ -2,6 +2,7 @@ module Coco
   class Component < ViewComponent::Base
     include Concerns::AcceptsTagAttributes
     include Concerns::HasName
+    include Concerns::Translatable
     include Coco::ComponentHelper
     include Coco::AlpineHelper
 

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

@@ -19,7 +19,7 @@ module Coco
           end
         end
 
-        private
+        protected
 
         def component_group
           @_component_group ||= component_path.split("::").first.underscore.tr("_", "-")

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

@@ -0,0 +1,18 @@
+module Coco
+  module Concerns
+    module Translatable
+      extend ActiveSupport::Concern
+
+      def tt(key)
+        t("coco.#{self.class.i18n_path}.#{key}")
+      end
+
+      class_methods do
+        def i18n_path(path = nil)
+          @_i18n_path = path unless path.nil?
+          @_i18n_path ||= component_path.underscore.tr("/", ".")
+        end
+      end
+    end
+  end
+end

data/config/credentials/production.key

@@ -0,0 +1 @@
+265f649a303f0c2cbbfc9cfece75a181

data/config/credentials/production.yml.enc

@@ -0,0 +1 @@
+j8VyKMx4mwRZArG1zS/oqUw1F6/UD0hQQ5sujzeTTBlNAuCTkLiuoiyAXnJV9FtR90T765ll/50wFbw0MFtk8nAzPJg=--TOqZsXP2UCs2CSMx--xYL00fHdXoCd+/xpGro01g==