coveragebook_components 0.5.0

data/app/components/coco/app/blocks/nav_bar/nav_bar.css

@@ -0,0 +1,51 @@
+@layer components {
+  [data-coco][data-component="app-navbar"] {
+    @apply @container;
+
+    .nav-content {
+      @apply h-11 @lg:h-14 flex items-center bg-teal-700 px-app;
+    }
+
+    .nav-logo {
+      @apply flex-none mr-8;
+    }
+
+    .nav-logo-small {
+      @apply h-6 @lg:hidden;
+    }
+
+    .nav-logo-full {
+      @apply hidden @lg:block h-7;
+    }
+
+    .nav-links {
+      @apply flex items-center w-full overflow-hidden;
+    }
+
+    .nav-link-group {
+      @apply flex items-center gap-x-6;
+
+      .nav-button {
+        > .button-inner {
+          @apply whitespace-nowrap text-white gap-2 text-label-sm @5xl:text-label-md py-2;
+        }
+
+        [data-component="icon"] {
+          @apply w-4 h-4;
+        }
+      }
+    }
+
+    .nav-secondary {
+      @apply ml-auto;
+    }
+
+    .nav-mobile-controls {
+      @apply flex items-center ml-auto text-white -mr-2;
+
+      [data-component="app-button"] {
+        @apply p-2;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+<%= render component_tag(x: {data: "appNavBar"}) do %>
+  <div class="nav-content">
+    <div class="nav-logo">
+      <%= image_tag asset_url("coco/img/coveragebook-logomark-white.svg"),
+            alt: "CoverageBook logomark",
+            class: "nav-logo-small" %>
+      <%= image_tag asset_url("coco/img/coveragebook-landscape-white.svg"),
+            alt: "CoverageBook full logo",
+            class: "nav-logo-full" %>
+    </div>
+    <div class="nav-links" x-ref="links">    
+      <div class="nav-link-group nav-primary" x-ref="primaryLinks" x-show="!mobile" x-cloak>
+        <%= safe_join(primary_buttons) %>
+      </div>
+      <div class="nav-link-group nav-secondary" x-ref="secondaryLinks" x-show="!mobile" x-cloak>
+        <%= safe_join(secondary_buttons) %>
+      </div>
+      <div class="nav-mobile-controls" x-show="mobile" x-cloak>
+        <%= coco_button(icon: :menu, theme: nil) %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,31 @@
+import { CocoComponent } from "@js/coco";
+import { getHiddenElementDimensions as getSize } from "@helpers/dom";
+import tokens from "@config/tokens.cjs";
+
+export default CocoComponent("appNavBar", () => {
+  const mobileMaxWidth = parseInt(tokens.app.screens.md, 10);
+  return {
+    mobile: true,
+    init() {
+      const sizeObserver = new ResizeObserver(
+        Alpine.throttle((entries) => {
+          this.$nextTick(() => {
+            const navWidth = entries[0].contentRect.width;
+            const linksWidth = this.$refs.links.offsetWidth;
+            const primaryWidth = getSize(this.$refs.primaryLinks, "flex").width;
+            const secondaryWidth = getSize(
+              this.$refs.secondaryLinks,
+              "flex"
+            ).width;
+            const difference = linksWidth - primaryWidth - secondaryWidth;
+
+            this.mobile =
+              navWidth < mobileMaxWidth || this.mobudifference <= 50;
+          });
+        }, 20)
+      );
+
+      sizeObserver.observe(this.$root);
+    },
+  };
+});

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

@@ -0,0 +1,19 @@
+module Coco
+  module App
+    module Blocks
+      class NavBar < Coco::Component
+        include Coco::AppHelper
+
+        component_name :app_navbar
+
+        renders_many :primary_buttons, ->(*a, **k, &b) { nav_button(*a, **k, &b) }
+
+        renders_many :secondary_buttons, ->(*a, **k, &b) { nav_button(*a, **k, &b) }
+
+        def nav_button(*args, **kwargs, &block)
+          coco_button(*args, **kwargs, theme: nil, size: nil, class: "nav-button", &block)
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/blocks/nav_drawer/nav_drawer.css

@@ -0,0 +1,9 @@
+@layer components {
+  [data-coco][data-component="app-nav-drawer"] {
+    @apply fixed top-0 left-0 bottom-0 h-screen w-[340px] bg-white shadow-2xl overflow-hidden;
+
+    .nav-inner {
+      @apply p-4;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+<%= render component_tag(x: { data: "appNavDrawer" }) do %>
+  <div class="nav-inner">
+    <div class="nav-header">
+      <%= coco_button(icon: :x, theme: nil) %>
+    </div>
+    <%= content %>
+  </div>
+<% end %>

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

@@ -0,0 +1,7 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("appNavDrawer", () => {
+  return {
+    open: false,
+  };
+});

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

@@ -0,0 +1,9 @@
+module Coco
+  module App
+    module Blocks
+      class NavDrawer < Coco::Component
+        include Coco::AppHelper
+      end
+    end
+  end
+end

data/app/components/coco/app/blocks/slat/slat.css

@@ -0,0 +1,9 @@
+@layer components {
+  [data-coco][data-component="app-slat"] {
+    @apply px-app;
+
+    &[data-padded="false"] {
+      @apply px-0;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Coco
+  module App
+    module Blocks
+      class Slat < Coco::Component
+        include Concerns::AcceptsOptions
+
+        accepts_option :padded, from: [true, false]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,71 @@
+@layer components {
+  [data-coco][data-component="app-slide-editor"] {
+    .editor-inputs {
+      @apply hidden;
+    }
+
+    .editor-toolbar {
+      @apply mb-4 xl:mb-6;
+    }
+
+    .editor-slide {
+      @apply shadow-lg;
+
+      textarea {
+        @apply flex-none w-full;
+      }
+    }
+
+    .coco-button.editor-saving {
+      @apply cursor-not-allowed;
+    }
+
+    .editor-thumbnail-file {
+      @apply hidden pointer-events-none;
+    }
+
+    .editor-screenshot-wrapper {
+      @apply w-0 overflow-hidden relative;
+    }
+
+    .editor-screenshot {
+      @apply absolute w-[800px] top-0 z-[-1000] pointer-events-none;
+    }
+
+    .editor-icon-bg-color {
+      @apply stroke-content-dark-1 fill-current;
+      stroke-width: 2px;
+    }
+
+    .editor-icon-text-color {
+    }
+
+    [data-component="app-seamless-textarea"] {
+      textarea {
+        @apply outline outline-1 outline-transparent outline-offset-0;
+
+        &::placeholder {
+          @apply italic;
+        }
+      }
+    }
+
+    .slide-bg-light [data-component="app-seamless-textarea"] {
+      textarea {
+        &:hover,
+        &:focus {
+          outline-color: rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+
+    .slide-bg-dark [data-component="app-seamless-textarea"] {
+      textarea {
+        &:hover,
+        &:focus {
+          outline-color: rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,235 @@
+<%= render component_tag(x: {
+  data: x_data("appSlideEditor", alpine_props),
+  ":class": "{ready}",
+  "@direct-upload:error": "directUploadError",
+}) do %>
+  <%= form_with(**form_args(
+    class: "editor-form",
+    "x-ref": "form",
+    "@turbo:submit-end": "submitEnd",
+    "@turbo:fetch-request-error": "submitError",
+    "@direct-uploads:end": "save"
+  )) do |f| %>  
+    <%= f.hidden_field(layout_name, **layout_options, "x-model": "layout") if layout? %>
+    <%= f.file_field(thumbnail_name, accept: "image/*", class: "editor-thumbnail-file", "x-ref": "thumbnail") if thumbnail? %>
+
+    <div class="editor-toolbar">
+      <%= coco_toolbar do |toolbar| %>
+        <% toolbar.with_section do |section| %>
+          <% if bg_color? %>
+            <% section.with_color_picker_button(
+              input_name: bg_color_name,
+              selected: bg_color_value,
+              form_builder: f,
+              wrapper: {
+                data: {
+                  role: "bg-color-picker"
+                },
+                x: {
+                  modelable: "selectedColor",
+                  model: "bgColor"
+                }
+              }
+            ) do |button| %>
+              <% button.with_picker %>
+              <% button.with_text { "Background color" } %>
+              <% 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,
+              input_name: bg_image_name,
+              src: bg_image_value,
+              direct_upload: bg_image_options[:direct_upload],
+              form_builder: f,
+              wrapper: {
+                data: {
+                  role: "bg-image-picker"
+                },
+                x: {
+                  modelable: "selectedImage",
+                  model: "bgImage"
+                }
+              }
+            ) do |button| %>
+              <% button.with_picker do |picker| %>
+                <% picker.with_blank_state_text do %>
+                    Drag a jpg, png or gif onto the slide area...or...
+                <% end %>
+              <% end %>
+
+              Background image
+            <% end %>
+          <% end %>
+
+          <% if text_color? %>
+            <% section.with_color_picker_button(
+              input_name: text_color_name,
+              selected: text_color_value,
+              form_builder: f,
+              wrapper: {
+                data: {
+                  role: "text-color-picker"
+                },
+                x: {
+                  modelable: "selectedColor",
+                  model: "textColor"
+                }
+              }
+            ) do |button| %>
+              <% button.with_picker %>
+              <% button.with_text { "Text color" } %>
+              <% button.with_icon do %>
+                <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="editor-icon-text-color">
+                  <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: "Undo",
+            theme: :text_secondary,
+            disabled: true,
+            x: { "effect": "disabled = !history.undoable" },
+            data: {
+              role: "undo"
+            }
+          ) %>
+
+          <% section.with_button(
+            icon: :redo_2,
+            click: "history.redo",
+            tooltip: "Redo",
+            theme: :text_secondary,
+            disabled: true,
+            x: { "effect": "disabled = !history.redoable" },
+            data: {
+              role: "redo"
+            }
+          ) %>
+          
+          <% section.with_button(
+            theme: :positive,
+            icon: :check,
+            collapsible: false,
+            type: "submit",
+            disabled: true,
+            data: {
+              role: "save"
+            },
+            x: {
+              "@click.stop.prevent": "if(!loading) save()",
+              "effect": "loading = saving; disabled = !history.undoable",
+              ":class": "{'editor-saving': saving}"
+            }
+          ) do |button| %>
+            <% button.with_state(:loading, text: "Saving...") %>
+            Save
+          <% 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)">
+      <%= coco_editable_slide(
+        **slide_args,
+        data: {
+          role: "slide"
+        },
+        x: {
+          ":style": "slideStyles",
+          ":class": "slideClasses",
+        }
+      ) do |slide| %>
+        <% if title? %>
+          <% slide.with_title do %>
+            <%= coco_seamless_textarea(
+              name: title_name,
+              multiline: false,
+              form_builder: f,
+              **title_options,
+              wrapper: {
+                data: {
+                  role: "title-editor"
+                },
+                x: {
+                  modelable: "value",
+                  model: "title"
+                }
+              }
+            ) %>
+          <% end %>
+        <% end %>
+
+        <% if text_1? %>
+          <% slide.with_text_1 do %>
+            <%= coco_seamless_textarea(
+              name: text_1_name,
+              multiline: true,
+              form_builder: f,
+              **text_1_options,
+              wrapper: {
+                data: {
+                  role: "text-1-editor"
+                },
+                x: {
+                  modelable: "value",
+                  model: "text1"
+                }
+              }
+            ) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <% if content %>
+      <%# Any additional fields required %>
+      <div class="editor-additional-content">
+        <%= content %>
+      </div>
+    <% end %>
+
+  <% end %>
+
+  <% if 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| %>
+          <% if title? %>
+            <% slide.with_title do %>
+              <span x-text="title"></span>
+            <% end %>
+          <% end %>
+
+          <% if text_1? %>
+            <% slide.with_text_1 do %>
+              <span x-text="text1"></span>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,178 @@
+import { CocoComponent } from "@js/coco";
+import { getData } from "@helpers/alpine";
+import { captureElementScreenshot } from "@helpers/screenshot";
+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) => {
+  return {
+    use: [withUndo()],
+
+    ...data,
+    saved: { ...data },
+    saving: false,
+    ready: false,
+    dragging: false,
+    errors: [],
+    thumbnailFile: null,
+
+    get bgImagePicker() {
+      return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
+    },
+
+    init() {
+      // Add property changes to the undo/redo history
+      this._fields.forEach((name) => {
+        this.$watch(name, (value, oldValue) =>
+          this.history.add(name, value, oldValue)
+        );
+      });
+
+      // 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!
+      });
+
+      this.$nextTick(() => (this.ready = true));
+    },
+
+    undo(name, value) {
+      this[name] = value;
+    },
+
+    redo(name, value) {
+      this[name] = value;
+    },
+
+    handleImageDrop(event) {
+      this.dragging = false;
+
+      if (this.bgImagePicker) {
+        this.bgImagePicker.handleExternalDrop(event);
+      } else {
+        event.preventDefault();
+      }
+    },
+
+    async save() {
+      this.errors.length = 0;
+      this.saving = true;
+
+      if (this.shouldGenerateThumbnail) {
+        try {
+          await this._generateThumbnail();
+        } catch (error) {
+          this.thumbnailFile = null;
+          message = error.message || "Error generating slide thumbnail";
+          this._handleSaveError(message, { error });
+          return;
+        }
+      }
+
+      this.$refs.form.requestSubmit();
+    },
+
+    submitEnd(event) {
+      handler = wasSuccessful(event) ? "submitSuccess" : "submitError";
+      this[handler](event);
+    },
+
+    submitSuccess() {
+      this.history.clear();
+      this._fields.forEach((name) => (this.saved[name] = this[name]));
+      this.saving = false;
+
+      console.info("Custom slide saved");
+      this.$dispatch("slide:save-end", { success: true });
+    },
+
+    submitError($event) {
+      message = "Error saving slide";
+      this._handleSaveError(message, { event: $event });
+    },
+
+    directUploadError($event) {
+      $event.preventDefault();
+      this._handleSaveError($event.detail.error, { event: $event });
+    },
+
+    get slideStyles() {
+      return {
+        backgroundColor: this.bgColor,
+        color: this.textColor,
+        backgroundImage:
+          this.bgImage && this.bgImage.data && `url('${this.bgImage.data}')`,
+      };
+    },
+
+    get slideClasses() {
+      return {
+        "slide-bg-dark": this.isDarkBg,
+        "slide-bg-light": !this.isDarkBg,
+      };
+    },
+
+    get isDarkBg() {
+      return (this.bgImage && this.bgImage.data) || this.bgColor
+        ? isDark(this.bgColor)
+        : false;
+    },
+
+    get shouldGenerateThumbnail() {
+      return !!this.$refs.thumbnail;
+    },
+
+    get _fields() {
+      return Object.keys(data);
+    },
+
+    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
+      );
+
+      console.info(
+        "Slide thumbnail generated",
+        `${this.thumbnailFile.size / 1000}KiB`
+      );
+    },
+
+    // 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;
+    },
+
+    _handleSaveError(message = "Error saving slide", context = {}) {
+      this.errors.push({ message, context });
+      this.saving = false;
+
+      this.$dispatch("slide:save-end", { success: false });
+    },
+  };
+});